1.1 需要了解的内容
(1)HTML+CSS+JavaScript
(2)node.js环境(npm包管理工具)
(3)webpack打包工具
2.1 安裝Git Bash来实现Linux一样的命令行操作
(1)windows 的Git Bash 的安装方法(点击此处查看方法)
(2)安装后的结果展示:
(3)找到需要的安装目录:
$ cd Desktop/vue学习项目
3.1.1 安装node.js
(1)下载安装node(点击此处下载)
(2)安装完成后,在terminal中输入node -v,检测是否安装成功和node.js的版本
(3)在terminal中输入 npm -v,检测是否npm安装成功和npm 的版本
3.1.2 安装cnpm
为了更稳定和高效,会选择安装淘宝的npm镜像,也就是cnpm
在terminal中输入(点击此处查看淘宝官方cnpm网站):
$ npm install -g cnpm --registry=https://registry.
在terminal中输入:cnpm -v,可以检查cnpm的版本号和是否已经被按钮
4.1.1 安装Vue
(1)在terminal中输入npm install vue
$ npm install vue
(2)在terminal 中输入vue -V ,查看vue的版本号和是否已经安装完成
$ vue -V
4.1.2 安裝 vue-cli脚手架构建工具
(1)在terminal中输入npm install -g vue-cli
$ npm install -g vue-cli
4.1.3 创建一个基于webpack模板的新项目
(1)创建项目,首先选定项目,然后在命令行中把目录转到选定的目录,在terminal输入vue init webpack my-project
$ vue init webpack my-project
或者使用terminal输入vue init webpack-simple my-project
$ vue init webpack-simple my-project
配置项目:
需要注意的是项目的名称不能大写,不然会报错。
Project name (my-project) # 项目名称(我的项目)
Project description (A Vue.js project) # 项目描述一个Vue.js 项目
Author 作者(你的名字)
Install vue-router? (Y/n) # 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代码? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 选择一个预置ESLint(使用箭头键)
Setup unit tests with Karma + Mocha? (Y/n) # 设置单元测Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 设置端到端测试,Nightwatch? (Y/ N)
当然这些都看你自己个人的情况,我这里是全选了是。
EsLint在项目开发中比较重要,需要符合一定的规范
安装成功展示:
4.1.4 安装项目所需要的依赖
(1)刚初始化的项目是没有依赖的,如果运行会报类似这样的错误,
(2)首先定位到my-project文件内
$ cd my-project
(3)在这之前需要解决项目的依赖问题,使用下面的命令安装项目的依赖。
$ cnpm install
(2)如果出现如下图情况,说明依赖解决成功。
5.1 运行项目
在terminal中输入
$ cnpm run dev