一、 安装vue-cli
-
打开cmd ,敲入命令:
npm install --global vue-cli
(–global:全局安装) -
安装好之后打开C:\Users\Administrator\AppData\Roaming\npm 可以看到这个文件夹下已经有相关的脚本文件,如图:
此时vue-cli已经安装好啦,往下走
二、 创建项目
- cmd打开自己的项目工作空间,然后敲入命令:
vue init webpack test
(其中test为我的项目名称) - 然后终端会出现下图“一问一答”模式,如图:
这里有几个需要说明一下,没说明的直接回车选择默认就好,对项目没多大影响,很傻瓜式:
“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车
“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”,而不是直接回车哦
“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”
这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
3.全部选择好回车就进行了生成项目,最后生成的目录结构如下图:
此时项目已经基本搭建完成。接下来和大家说明一下目录结构~
三. src文件夹:
![](https://i.imgur.com/70kNsmI.png)
这个文件夹是整个项目最主要以及使用频率最高的文件夹。
“assets”: 共用的样式、图片
“components”: 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
“router”: 设置路由
“App.vue”: vue文件入口界面
“main.js:对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置
4.static 文件夹:
存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
5.package.json:
这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是npm run dev
;例如设置了build 则是输入 npm run build
用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包
四、 下载依赖包
上一步我们已经生成好项目,现在打开之前说过的package.json 文件,找到devDependencies 和 dependencies ,在这里面可以删掉我们不需要的,其他就则都需要使用 npm install 下载安装,例如vue: npm install vue –save-dev
这个过程会生成一个node_modules 文件夹,这一个过程可能会有一点耗时间,但是也是傻瓜式,一个个下载,下载好之后输入npm run dev 。如果有哪些缺漏的都会提示再补下载就好了
五、 npm run dev
当所有依赖包都下载好之后,输入命令:npm run dev
运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧,总结下来其实只有四步
npm install --global vue-cli
下载vue-cli脚手架vue init webpack test
生成项目,形成基本结构npm install 依赖包
npm run dev
运行
我们接下来要做的就是业务相关的了,vue 就是一个个组件往里面加就可以了。