前言
之前写了一个Vue项目构建过程,开发环境没有细说,本文将详细的说一下开发环境的搭建,和vue-cli的使用。
确保本机安装node环境
- 具体安装很简单 点我下载node 根据自己计算机系统及位数选择对应的安装包下载即可
- 安装完毕后,测试是否安装成功,打开命令终端,我这里是Windows,win+r输入cmd进入终端,输入命令
node -v
或者直接输入node
回车即可,如果出现下图显示则说明node环境安装成功: - node中集成了npm包安装工具,输入命令
npm -v
查看版本号,如图:
安装webpack打包工具
- 终端下使用npm安装即可,输入命令
npm install webpack -g
全局安装 - npm安装速度可能会很慢,可以使用国内淘宝镜像即使用cnpm代替npm;当然使用前需要安装一下,键入命令
npm i cnpm -g
[install可以简写为’i’];安装完毕就可以使用cnpm了;键入命令cnpm i webpack -g
进行webpack的安装 - 安装完毕后键入命令
webpack -v
验证是否安装成功,出现版本号则表示成功,如图:
全局安装vue-cli
- 终端下键入命令
cnpm i vue-cli -g
进行全局安装 - 等待安装,完毕后键入命令
vue -V
验证是否安装成功,此处-V为大写[注意:如果安装vue-cli时报错,建议在管理者模式下进行安装],出现版本号则表示成功,如图:
使用vue-cli进行项目创建
- 在你想要创建项目的文件夹下,调出终端窗口[按住shift键点击鼠标右键即可]
- 键入命令
vue init webpack mydemo
创建一个基于webpack模板的项目,这里下图的几个单元测试和代码检验工具建议都写no,不然后期写代码时容易以为代码不规范而报一堆错
- Project name: 项目名称 默认即可
- Project description: 项目描述 默认即可
- Author: 作者
- Vue build: 构建模式 默认即可
- Install vue-router?: 是否安装路由模块,Y 安装即可
- Use ESLint to lint your code?:这里建议选no 否则会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度
- Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试用的,可以不用安装,都是no
- 如果以上没有出错的话,在目录下就会创建出来一个名字为mydemo的文件,打开文件目录是这样的,如下图:
- build 和 config:是关于webpack的配置,里面包括一些server,和端口;
- src: 是存放源码的;里面包括入口文件,路由以及组件之类
- static:存放第三方静态资源的,static里面的.gitkeep,如果为空,也可以提交到gitHub上面,正常情况下,是不可以提交的。
- .babelrc: 把es6文件编译成es5
接下来安装项目依赖,键入命令
cnpm i
等待下载,如下图:安装完毕后,打开项目目录会发现多出一个名为node_modules的文件夹,说明依赖安装成功,如下图:
最后执行命令
npm run dev
运行我们的项目,如下图:在浏览器端键入上一步标红的网址即可访问预览,如下图:
总结
综上几个步骤可以从零搭建起一个Vue的项目了,并且在浏览器上成功预览,第一遍可能会出问题,比着上边的步骤一步步来应该不会出问题的,后面会写项目创建后的配置及怎么创建我们自己的页面,并展示在浏览器上。