准备工作
1、下载安装Node.js
下载地址:nodejs.org/en/download… ,选择合适自己的版本下载即可。
具体怎么安装Node.js就不用具体说明了,安装Node.js会默认安装npm(包管理工具)。
2、启用cmd
按下Windows+R,在打开的“运行”程序窗口,输入“cmd”,并按下回车键,即可打开系统自带的命令提示符。
3、安装cnpm
npm是Node.js提供的包管理工具,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,我们可以用淘宝 npm 镜像cnpm代替默认的 npm。
方法一:使用npm安装cnpm
npm install -g cnpm
复制代码
注:这样可能会导致npm和cnpm版本可能不一样。
方法二:用alias 命令设置别名
alias cnpm="npm"
复制代码
输入cnpm -v查看cnpm版本,来检查cnpm是否正确安装。如未正常安装请检查系统变量path是否配置正确(不是本文重点,此处不再赘述)。
4、安装vue-cli
使用cnpm全局安装vue-cli,在cmd中输入一下命令(注:“-g”这个参数意思是全局安装)
cnpm install -g vue-cli
复制代码
正式工作
1.新建项目mydemo
vue init webpack mydemo
复制代码
mydemo是项目名称,这个名字自己随便取(不能有大写字母)。命令输入后,会进入安装阶段,需要用户输入一些信息。
信息详情
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测试。
用编辑器打开项目,目录结构大致是这样的。
目录介绍
bulid
里面是一些操作文件,使用npm run * 时其实执行的就是这里的文件。
webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件,
分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容,一些简单的配置都已经有了,包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的,比如生成环境需要加上UglifyJsPlugin插件等可以自行配置,或者一些插件增加或者不需要的删除,其实都是和业务相关了,其他的都可以不需要动。
config
配置文件,执行文件需要的配置信息。
最主要的就是index.js 这个文件进行配置代理服务器,这个地方和我们息息相关,和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性,然后在里面加上对应的后台地址即可,例如:
src
资源文件,所有的组件以及所用的图片都是在这个文件夹下放着。简单看一下这个文件夹下都放了哪些东西。
assets
资源文件夹,放图片之类的资源,
components
组件文件夹,写的所有组件都放在这个文件夹下,
router
路由文件夹,这个决定了页面的跳转规则,
App.vue
应用组件,所有自己写的组件,都是在这个组件之上运行了。
main.js
webpack入口文件
static文件夹
存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
package.json
这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是 npm run dev ;例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包
2.在mydemo下安装依赖
切换到项目目录
cd mydemo
复制代码
安装模块
cnpm install
复制代码
它根据package.json的配置表进行安装,安装完后会在mydemo下多一个文件夹node_modules,这里的文件对应着package.json里的配置信息。
3、运行mydemo
输入命令
npm run dev
复制代码
在浏览器输入地址http://localhost:8080,大功告成,一个Vue项目已经初始化完成!