写在前面:
本人后端dog,项目开发可能要涉及前端vue,遂学。下面主要从两个部分,基于实际开发需求,以前端小白的心态做一些学习和实践的记录和总结:
- 第一部分,详细描述Windows 下vue开发环境的安装配置
- 第二部分,超详细且浅显讲如何使用vue-cli脚手架搭建一个基于 webpack 模板的vue工程
一、鸟瞰Vue开发的环境需求
vue.js所有的环境基础包括:
- Node.js :这是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时,(运行时:可以理解为运行环境)
- npm:这是node.js的包管理工具
- webpack:前端资源模块化管理和打包工具
- vue-cli:脚手架构建工具
- cnpm:npm的淘宝镜像
二、安装配置vue的开发环境
如果不确定自己之前是否安装过上面这些东西,可以先确认一下,例如下面我想确认一下我是否已经装了node.js:
- 菜单栏-->输入cmd-->找到-->右键管理员方式打开
- 输入 node -v ,回车:
如果像上面这样显示出版本号,则代表已经装过了,在版本满足你需求的情况下就无须再装了。如果没有装过,会提示你"xx不存在"类似的指令。
1、安装node.js
到node.js官网下载你所需要的版本,双击下载后的安装包,按照提示一路点"下一步"(和安装普通软件一样)即可。
安装完以后,检查一下PATH环境变量 是否已经自动配置了node.js。
点击开始=》运行=》输入"cmd" => 输入命令"path"(下面是我cmd查出来后放记事本格式化后展示出来的样子):
可以看到PATH环境已经安装成功。
现在我们再来cmd查一下node.js版本:
没毛病。
2、npm
npm是随同Node.js一起安装的包管理工具,直接在命令行敲出npm -v就可以查看是否安装成功:
3、安装淘宝的国内镜像
因为npm包管理器需要依赖包的服务器地址是国外的,资源下载及访问会很慢,所以我们需要安装淘宝的国内镜像来提高速度。
安装淘宝的国内镜像的指令:
npm install -g cnpm --registry=http://registry.npm.taobao.org
cmd信息如下:
以后安装其他依赖,你就可以使用这个命令了:
cnpm install [依赖的name]
4、安装webpack
安装指令:
cnpm install webpack -g
cmd信息如下:
提示安装成功
5、安装vue 脚手架
第一次使用npm指令安装失败
第二次使用cnpm指令:
cnpm install --global vue-cli
成功
三、使用vue-cli构建一个基于 webpack 模板的vue项目并启动
不同于创建一个java后端工程,创建一个vue工程,需要在命令行编写指令一步步完成(嗯,,反正我目前只会这种方式,,)。你可以使用电脑自带的cmd命令行窗口,也可以装一个vscode(两个工具指令和步骤都一样)。使用它的终端窗口,长下面这样:
1、初始化一个vue工程。
1.1 先cd到你想要的目录下,我放到了我的aigovProject文件夹下:
1.2 初始化vue环境:
1.3 提出vue的初始化指令解释一下:
vue init webpack name(项目名)
这个指令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。
1.4 在安装过程会有一些初始化的设置提示,如下是我的操作及解释:
- Project name :你可以在这填写和修改初始的项目名称,注意我上面图片上的注意事项哈
- Project description : 项目的自我介绍,你可以写:这是全球最np的Vue项目
- Author :项目作者,你的小名-狗子
- Vue build (Use arrow keys)
Vue build standalone 这两个选它推荐的那个,好像是运行加编译的意思 - Install vue-router? (Y/n) : 是否安装Vue路由,这是Vue的核心必须要,后面专门写一下这个路由。
- Use ESLint to lint your code? (Y/n) :使用 ESLint 到你的代码?这是个代码风格管理工具,选一下。
- Pick an ESLint preset (Use arrow keys) :选择一个预置ESLint,这个就是接在上面那个问题下的,意思让你选一个代码风格。
- Setup unit tests with Karma + Mocha? (Y/n) :是否安装单元测试
- Setup e2e tests with Nightwatch? (Y/n) :是否安装e2e测试
- Should we run `npm install` for you after the project has been created?:这个是问你,要不要项目创建后,自动为你执行 npm install命令,你不选的话,项目创建后,你需要进入[项目文件夹]手动执行npm install。(我这里选了自动install,之前我用cmd创建项目好像没问我这个,,)
注:
npm install 指令是为项目安装模块,在install 后面输入模块的名字可以安装指定模块,比如:安装路由模块vue-router和网络请求模块vue-resource:
npm install vue-router vue-resource --save
如果不指定模块,直接执行npm install,就会按照根目录下的package.json文件中依赖的模块安装,这里我用npm install 安装所有的模块。安装完成后,目录中会多出来一个node_modules文件夹,这里放的就是所有依赖的模块。
1.5、上面所有配置完成后,没有ERRO报错的话,是这样的:
2、启动项目
2.1 依次次执行下面命令启动vue项目:
cd vueDemo //记得先进入你的项目文件夹
npm run dev
2.2 运行成功是这样的:
2.3、浏览器输入上面地址:
3、 在VSCode中查看项目架构及一些配置文件解释
3.1 项目结构解释
自己的新增项目文件都需要放到下面的 src 文件夹下 。
3.2 超详细的vue-cli webpack配置分析(转)
4、Vue项目打包上线
开发完成,输入以下指令打包Vue项目,打包完成后,会在本地指定文件目录生成 dist 文件,随后将其丢到服务器上即可。
npm run build
注1:可能会遇到的错误和解决办法:
- 创建Vue项目报错“npm ERR! code EPERM npm ERR! errno -4048”
- 'eslint' 不是内部或外部命令,'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序
注2:一些指令的使用:
- npm run dev 启动项目后,使用 ctrl+c 可退出或关闭Vue程序
- --save-dev指令 可自动把模块和版本号添加到模块配置文件package.json中的依赖里devdependencies部分
- --save 安装包信息将加入到dependencies(生产阶段的依赖)
- --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它