环境搭建
安装 Node.js
从Node.js 官网上下载 Node.js for Windows(x64)的文件,一路“下一步”安装完成。
注:
- 使用 Win+R 输入 cmd 打开命令行输入
node -v
,出现版本号,则说明安装成功。
- 包管理工具
npm
在安装 Node.js 时会一起安装好。
安装 Webpack
在命令行中输入npm install webpack -g
。
注:
- 安装完成后
webpack -v
,出现版本号,则说明安装成功。
- 若出现如下报错,执行
npm install webpack-cli -D
,安装 webpack-cli。
安装 Vue-cli
在命令行中输入npm install -g @vue/cli
。
注:
- 安装完成后输入
vue -V
(大写 V),出现版本号,则说明安装成功。
项目准备
我的项目都是使用的 Webstorm 搭建的
我的工程地址在C:\User\s5\WebstormProjects
,所以在命令行中执行:
1 2
| cd WebstormProjects vue init webpack projectname
|
注:
- projectname 为项目名。
package.json
配置过程:
(建议:除了Use ESLint to lint your code?
选no
,其他配置全部回车就好。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| $ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令 This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目 For Vue 2.x use: vue init webpack ? Project name (projectname) ---------------------项目名称 ? Project name projectname ? Project description (A Vue.js project) ---------------------项目描述 ? Project description A Vue.js project ? Author Datura --------------------- 项目创建者 ? Author Datura ? Vue build (Use arrow keys) ? Vue build standalone ? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块) ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no ? Use ESLint to lint your code? No ? Setup unit tests with Karma + Mocha? (Y/n) ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? (Y/n) ? Setup e2e tests with Nightwatch? Yes vue-cli · Generated "projectname".
|
目录结构:
项目运行
命令行进入刚才创建的项目目录,然后执行命令:
1 2
| cd projectname npm run dev
|
此时可以在浏览器中输入localhost:8080
查看到实例页面。
参考Vue2.0 史上最全入坑教程