●下载安装 nodeJs
下载地址:https://nodejs.org/en/download/
命令行>node -v;成功查看到版本号即表示nodeJs安装成功。
●安装cnpm
npm是默认安装好的包管理工具,为了提高我们对包的下载速度,我们需要安装 淘宝npm镜像(cnpm)来代替npm;
安装cnpm
命令行>npm install -g cnpm --registry=https://registry.npm.taobao.org;
检查安装成功
命令行>cnpm -v;
默认是配置好系统环境变量,如果没有请查核实。
以下内容中的npm都可替换为cnpm来执行。
●安装vue-cli脚手架搭建工具(全局)
命令行>npm install -g @vue/cli
命令行>npm install -g @vue/cli-init
●用vue-cli脚手架初始化一个项目
命令行>vue init webpack myObject;
初始化时有以下提示:
Project name (vuetest)
项目名称,可以自己指定,也可直接回车,按照括号中默认名字。
Project description (A Vue.js project)
项目描述,也可直接点击回车,使用默认名字。
Author
作者,可以自己指定,也可直接回车。
接下来会让用户选择
Runtime + Compiler: recommended for most users
运行加编译,既然已经说了推荐,就选它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行时,已经有推荐了就选择第一个了
Install vue-router? (Y/n)
是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行。
Setup unit tests with Karma + Mocha? (Y/n)
是否安装单元测试。
Setup e2e tests with Nightwatch(Y/n)?
是否安装e2e测试。
●运行项目
命令行定位到项目根目录下
命令行>npm run dev;
●为项目增加前端路由