从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

缘起

 哈喽大家好,兜兜转转终于来到了Vue实战环节,前边的 6 篇关于Vue基础文章我刚刚简单看了看,感觉写的还是不行呀,不是很系统,所以大家可能看上去比较累,还是得抽时间去润润色,修改修改语句和样式,至少也得对得住粉丝哈,应该给博客园官方提个小建议,要是能允许好友或者其他人修改文章的功能就好了,比如百科和Wiki 那种就挺好哈哈,今天呢,终于到了安装环境的一章了,网上的栗子和文档也是很多,本来打算跳过这一章节,但是想想,本系列还是需要这一块来完善的,这才是整体教程嘛,好啦,废话不多说,准备好电脑安装吧!

今天的主要工作就是配置开发环境,不会涉及到代码,会平面化的铺开来说,相对来说比较简单,只是做一个记录使用,主要呢由以下几个方面:

A:安装 IDE —— Webstorm / VSCode / Atom

B:安装 nodejs 环境

C:安装 NPM / CNPM

D:安装 Git

E:安装 webpack

F:安装 vue-cli 脚手架

G:创建 blogvue 工程

H:对整体项目文件简要说明

I :Hello World

 好啦,开始今天的表演~~~

零、今天要完成左下角红色的部分

 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

A、Vue 常见的IDE —— 我是开发工具,干活的都是我

一个好用的工具可以为开始节省太多的时间,增加效率,从而达到事半功倍的作用,作为一个.net 攻城狮,我几乎每天都泡在 visual studio 里,这个号称是宇宙级编辑器,当然现在有很多的大神都说开发人员用一个 node++就行,嗯~~~说实话不敢苟同,就比如说今天还着急的写了几个页面,要不是智能提示,真的会慢很多。今天呢,要说的Vue的开发工具,这里就简单说下三种常见的开发工具,大家都可以试试,根据个人爱好(我询问了几个vue开发的朋友,普遍用的是sublime,然后现在好像VSCode 和 Webstrorm的比较多,剩下的就是Atom,本系列用的是WebStorm)。

1、VsCode

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装地址:https://code.visualstudio.com/Download

推荐优点:1、作为微软大大的产品,咳咳,还是比较给力,我在微软工作的时候,看到好多人在为了visual studio开发,甚至一个小组件都精益求精,点赞;

2、首次开始初始化特别快,号称是最快的,如果电脑比较低配,推荐使用;

3、微软这两年在开源道路山越来越给力,所以VsCode当然也是开源的,而且颜值也是可以,至少比Webstorm漂亮一丢丢;

4、尤雨溪大大一年前曾经也是很推荐,不知道现在有没有变化好好;

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

5、各种插件随心安装,使用量很多,插件很丰富;

6、支持断点调试debug,也是很嗨;

2、Webstorm

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装地址:https://www.jetbrains.com/webstorm/download/#section=windows

推荐优点:1、只能代码补全,针对不同的浏览器,还支持基本流行库JQuery, YUI, Dojo, Prototype, Mootools and Bindows。

2、可以格式化代码,也可以自定义,作为强迫症的我来说,必须要代码整齐才是好的代码哈哈;

3、智能提示,联想查询,可以像VS那样,Ctrl+鼠标点击,可以跳转到定义;

4、代码检查和修复,可以提示错误的所在地点,快速解决;

5、最新版本已经继承Vode插件,可以界面话启服务,编译,打包等等,再也不用写命令行了;

6、nodejs 最好的开发工具,没有之一。只要你会用 chrome 调试浏览器端的 js,那么你就会用 webstorm 调试 nodejs。

7、简单易操作的版本控制,只要你简单的配置下git或svn就可以使用快捷键快速的进行版本控制

8、实时保存,不用频繁的按ctrl+s了

Diss缺点:从上边的功能也可以看出来,VsCode注重开源,快速和社区,这些Webstorm都木有

1、启动缓慢,内存占据大(300M+),如果再配上websocket,低配置的笔记本就开始唱歌了[哭笑];

2、是收费滴,真挺贵,只有一个月的免费使用,不过上有政策下有对策,各种序列号,破解等从来没停过

3、样式长的不是很好,虽然有很多主题,属于注重功能型选手。

3、Atom

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装地址:https://atom.io/

推荐优点:1、啥都不说,就冲着这个颜值,就得加分哈哈,还有各种主题;

2、Atom是最大的开源网站github出的,基本功能和颜值都在线的,插件的质量还是很高的;

3、强大的社区做后盾,为程序员开发提供福利,特别是前端程序员;

4、当然还有很大的优点,就是开源免费,想用啥都可以;

缺点:1、还是稍微会卡顿的,不过官方正在慢慢优化,相信github也会慢慢加大投入;

总结:嗯。。。不太好说哈,大家可以思考思考,不过可能综合考虑来说,VsCode可能性价比高,Webstorm功能深,Atom开源颜值美。

B、安装Nodejs环境 —— 我是运行环境,没我不行

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 
Node.js 的包管理器 npm,是全球最大的开源库生态系统。

 安装地址:官网 https://nodejs.org/en/download/ 

国内 http://nodejs.cn/download/

 然后就是普通安装,一步一步 next 即可

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装成功以后,打开我们的安装路径,我们可以看到,除了node,文件夹里还有npm,一起被安装了

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

下面咱们会说到 npm,这里咱们先看node是否安装成功,打开 CMD 命令窗口,输入  node -v (注意要重启电脑

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

这个时候,能看到node 的版本号,证明我们已经安装成功了,而且是全局的。

C、安装 npm / cnpm —— 我是包管理器,想要的都来拿

首先呢,咱不能直接上来就安装是吧,得明白其中的含义,为啥要安装,

 NPM 名字的由来:Node Package(包) Manager(管理器),从名字看来它是通过 node 的包管理器,嗯大概了解了,那具体来说呢,好像还是不清晰,这个时候咱们说个栗子1,

咱们平时开发c#的时候,需要安装包,咋安装的呢,就是通过nuget包管理来安装,没错,npm也是起到了这个作用,只不过是 node 需要用的前端包。如果还是不太清晰,咱们说个前端的栗子2,

平时咱们开始jQuery的时候,需要引用jQuery.js 文件是吧,这一两个还好,要是多了可咋整,一个个手动添加不方便呀,欸!这个时候就有人想到了办法,用 JavaScript (运行在 Node.js 上)写的 npm,来控制已经提交到 远程仓库里的包,这些包都是原作者一个个发布上去的,起了一个名,如果咱们使用的时候,只需要再 packbag.json 中,写上这个名字,嗯!就成功的从远程 down 下来了,是不是很方便,是不是感觉前端慢慢工程化了!

说了这么多,那到底如何安装呢,不用慌!上边咱们也说了,npm 是运行在node.js 上的,所以咱们刚刚安装 node.js 的时候已经安装好啦,不信来试试,

在cmd 命令窗口中,输入 npm -v ,就看到了自己安装的版本了。

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

然后就开始用着很开心,但是类,后来发现这个远程仓库是在国外的,每次都需要FQ,有时候一二百兆的文件,需要等好久,更厉害的还卡到了一半,就挂掉了,哎,真是桑心,欸!国外有大神,国内也有老板,没错,就是一直专注于开发的阿里攻城狮们,自己根据 npm ,搭建了一个国内的镜像,基本来说内容都差不多,虽然号称一直在同步,不过有时候命令还是有些问题,不过基本的都没啥问题,如果你不能FQ,如果电脑很卡,没问题!放心的时候吧,就是 cnpm!那如何安装呢?

我们刚刚已经成功的安装了npm了,这时候我们执行下命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装完成即可。以后呢,任何 npm 的命令,都可以使用 cnpm 来写,比如下边,就是这么简单! 

npm  run dev//正规版
cnpm run dev //镜像版

D、安装 Git —— 我来简化cmd操作的,可以不用我

这里要说下为什么安装 git,因为在以后的开发中,会涉及到各种启服务呀,发布呀等等,而且都需要进入不同项目的不同文件夹操作,常用的呢是以下三个操作:

1、通过cmd 命令行,进入不同的文件夹,比如:cd D😛rogram Filesnodejs ,然后再进入不同的文件夹,万一哪次没看好生成错了,就麻烦,所以我们需要工具。

2、通过 power shell 来执行,不知道这个工具的呢,可以百度下,目前win10自带都有,使用起来也很简单,在当前文件夹下,先按下 shift 键,然后点击鼠标右键,就弹出来了,

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

然后执行命令也是可以滴,是不是很方便,当然还可以使用下一种。

3、通过 git 的方法,https://git-scm.com/downloads,然后普通安装成功后,就能看到上图中的 Git Bash Here 了,就是直接进入当前文件夹地址,然后就可以随心的操作了。

总结:通过一定的工具来辅助开发还是很有必要的,安全又可靠。

E、安装webpack —— 我是打包东西的

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

 还是老规矩,咱们呢,先说说什么是WebPack,这里要说webpack ,那首先就得说说 SPA

1、什么是SPA

这个名字起的,总能让大家想起来其他的哈哈,言归正传,现在的web网站正在慢慢前端化,在vue开篇的时候我也说过了,关于我的开发历程,来简单说了下web的发展过程《十四 ║ VUE 计划书 & 我的前后端开发简史》,总结来说,越来越多的JS,由整页的刷新,到局部刷新,到现在的SPA(单页面应用程序)—— 就是整个项目是一个页面,通过锚点 路由,将全部的组件结合起来,看起来像是多个页面。所以大家想一下,现在整个web应用程序都融合到了一个页面里,一个体积庞大的代码库就需要好好的控制和组织,不能出现混乱的局面,这个时候为了解决这个问题,就出现了——模块化编程的思想。

2、传统前端开发的问题

这个时候如果还是不太清楚,那我们举个栗子:

大家在开发的时候一定会遇到过这个问题,我的项目是用Bootstrap框架开发的,但是呢,突然领导看上了EasyUI其中的一个组件或者是小插件,这个时候,我们就会直接把EasyUI的样式给引入进来,

 	 	 	"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

//引入了EeayUI样式
 	 	 	"stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/default/easyui.css"/>
 	 	 	"stylesheet" type="text/css" href="../resource/js/jquery-easyui-1.5/themes/icon.css"/>

这个时候,本来应该很开心的看结果了,发现好多地方都冲突了,额。。尴尬呀,当然正规项目是不能这么开发的,都是自己的前端工程师写的,这里只是举一个反面教材,大概就是这个意思,当然还有JS文件的引用,比如这样

模块接口导出到全局对象,即window对象。模块的接口可以访问全局对象的依赖关系,从上边的问题中可以看出来以下问题

全局冲突 
对加载的顺序严重依赖
开发人员必须人工解决模块/库的依赖关系 
大型项目,script.js可以很长,难以管理

3、CommonJs: 同步加载 就出现了

这种风格用同步require 的方法去加载一个依赖并用暴露一个接口。 一个模块可以通过给export对象添加属性或给module.exports设置值 来指定导出。

require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;

服务器端node.js用的就是这种标准。 1. 服务器端模块可以重用 2. 已经有许多模块用这种风格(npm)。生态圈良好 3. 非常简单和容易使用。

4、什么是webpack,为什么要使用它

webpack是一个模块打包器。WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。现有的模块打包器不适合大项目(大单页面应用)程序。代码分割和静态资源无缝模块化的迫切需求,催生了一个新的模块打包器。 我试图扩展现有的模块打包器,但是它没能实现所有的目标。 

1. 把依赖树切分成块,实现按需加载。

2. 保持低初始加载时间

3. 每个静态资源都能是一个模块

4. 具备把第三方库集成为模块的能力

5. 具备打包器每个部分几乎都能自己定制的特点。

6. 适合大型项目。

安装:直接执行 npm 命令

npm install webpack -g

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

这个时候,我们的 webpack 就已经安装完成啦,以后可以使用了。

F:安装 vue-cli 脚手架 —— 我是用来创建项目模板的

 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

vue-cli 是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板的,脚手架大家肯定知道,就是一个架子,用来搭建项目的整体基本骨架,有点儿什么意思呢,就比如咱们开发 .net 的时候,咱们其实可以自己一步一步的建 mvc ,但是呢,VS给我们封装了 MVC框架,我们直接就生成了整体框架,包括基础包和一些必要文件夹,vue-cli 也是这个作用。

全局安装:直接输入 npm 命令

npm install --global vue-cli

安装完成后,我们输入 vue -V(这里是大V),看到版本号,就证明安装成功了,现在已经是 3.0 的脚手架了,生成的文件夹和 2.0 的不一样,一会儿咱们都会说到。

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

G:创建 blogvue 工程

1、先说说 2.0 的创建工程的过程

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

1、进入指定文件夹后,执行 

vue init webpack blogvue

2、然后就是一系列选择的过程

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

然后就是一直等待就行了,看到完成了。然后进入该项目文件夹,执行 npm run dev,就可以启动了

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

就这样启动了。


2、然后呢咱们再说下 3.0 的创建工程过程

截至到目前,vue脚手架已经4.0版本了,但是我的教程是3.0的,可能不太一样,如果你也想安装3.0的,可以指定安装版本

npm install -g vue-cli@版本号

如果就想用最新版本的,直接默认安装吧

首先执行下命令  npm i -g @vue/cli 升级到3.0( 注意管理员权限 )

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

安装好后,开始创建我们的项目  vue create project-name

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

这里有两个方式:默认方式和手动方式

默认方式就是安装 babel 和 eslint ,一致 Enter 键往下走就是了,因为不需要那么多,所以我就选择手动了,这里说下,好多人第一次不知道如何进行选择——使用键盘上下键来操作,然后 Enter 选中,然后就会出现插件列表,也是用上下键,然后用 空格键 来选中,下边有动图。

选择要安装的配置(注意: Linter / Formatter 尽量不要选,会经常报格式不正确警告和报错,如果无所谓也可以安装

特别是在 build 的时候,也会出现报错,但是只要看到生成 dist 文件夹就行了,不用关注那些 errror 和 warning

 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

下边是选择的过程:

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

这里说下这几个的意思:

babel:一个javascript转译器,将最新版的js语法(es6、es7)转换为现阶段浏览器可以兼容的js代码

typescript:作用有些类似于babel,拥有类型检查能力和面向对象新特征。

PWA:渐进式WEB应用

Router:路由,设置url,使不同的url显示不同的页面

Vuex:作用类似于全局对象,但是并不完全相同。

CSS Pre-processors:css预处理器

Linter / Formatter:代码规范标准  // 注意:尽量不选

Unit Testing:单元测试

E2E Testing:e2e测试

接下来,选择css预处理,这里我选择stylus

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  SCSS/SASS
  LESS
> (*)Stylus

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

这里说下 stylus :来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,不过在使用人群上不如Sass和LESS。

然后选择格式化配置

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

选择何时检查代码规范 —— 保存的时候

? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

选择配置的存放地址

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> (*)In dedicated config files //独立文件存放
  In package.json// package.json 文件

然后是否将上述配置保存(保存后,下一次将能直接一键配置)

 Save this as a preset for future projects? (y/N)

下次安装的时候就是这样的

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

接下来就是安装了,等待中…

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

3、通过可视化UI页面创建

我们可以直接通过命令,vue ui 来调取页面,基本都是一样的,没有啥区别,只是更UI化。

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

具体的大家可以玩玩,这里就不细说了。

H:对整体项目文件简要说明(整理中)

1、2.0的整体项目构造是这样的

├── README.md                       // 项目说明文档
├── node_modules                    // 项目依赖包文件夹
├── build                           // 编译配置文件,一般不用管
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config                          // 项目基本设置文件夹
│   ├── dev.env.js                  // 开发配置文件
│   ├── index.js                    // 配置主文件
│   └── prod.env.js                 // 编译配置文件
├── index.html                      // 项目入口文件
├── package-lock.json               // npm5 新增文件,优化性能
├── package.json                    // 项目依赖包配置文件
├── src                             // 我们的项目的源码编写文件
│   ├── App.vue                    // APP入口文件
│   ├── assets                      // 初始项目资源目录,回头删掉
│   │   └── logo.png
│   ├── components                  // 组件目录
│   │   └── Hello.vue               // 测试组件,回头删除
│   ├── main.js                     // 主配置文件
│   └── router                      // 路由配置文件夹
│       └── index.js                // 路由配置文件
└── static                          // 资源放置目录
└── test                             // 我们的项目的单元测试文件

2、3.0的整体项目做了很大的调整,没有了 build 和 config

├── public                               // 项目公共文件夹
│   └── favicon.ico                      // 项目配置文件
│   └── index.html                       // 项目入口文件
├── src                                 // 我们的项目的源码编写文件
│   ├── assets                             // 基础样式存放目录
│   │   └── logo.png                   // 基础图片文件
│   ├── components                          // 组件存放目录
│   │   └── HelloWorld.vue               // helloworld组件
│   ├── views                               // view存放目录
│   │   ├── About.vue                  //about 页面
│   │   └── Home.vue                        //Home 页面
│   └── App.vue                       // App入口文件
│   └── main.js                        // 主配置文件
│   └── router.js                       // 路由配置文件
│   └── store.js                       // Vuex store配置文件
├── tests                                 // 测试文件夹
│   ├── unit                                // 单元测试
│   │   ├── .eslintrc                   // 基础图片文件
│   │   └── HelloWorld.spec.js           
└── babel.config.js                           // babel 配置文件
└── package.json                             // 项目依赖包配置文件 
└── package-lock.json                        // npm5 新增文件,优化性能
└── postcss.config.js                        //  
└── README.md                                // 说明文档 

I、结语

好啦,今天的安装就到这里了,当然还有一些小技巧我还没有说,终于出现传说中的Hello World了,下次咱们就开始正式搭建项目啦,再见咯~~~

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】

文章来源于互联网:
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战:开发环境搭建【详细版】


技术交流Q群: 1012481075 群内有各种流行书籍资料
原文链接:

发表评论

您的电子邮箱地址不会被公开。

WeChat
WeChat
QQ
QQ
返回顶部