安装
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
你需要全局安装vue-cli工具:
1 | npm install -g @vue/cli |
使用这个命令查看是否安装成功:
1 | vue --version |
创建一个项目
运行以下命令创建一个新项目:
1 | vue create 你的项目名 |
命令执行后会提示选取预设:
推荐选择Manually select features,也就是手动选择预设。(上下箭头调整选中,回车确定选择)
回车后跳出很多选项,选择你项目中需要用到的工具。
Babel:你的项目是否需要做编译转化,如ES6转化为ES5语法以兼容低版本浏览器。
TypeScript:是否使用TS编码。
Progressive Web App (PWA) Support:是否支持webApp。
Router:是否需要路由。一般用来做单页应用需要用到,可做到无刷新页面跳转,交互友好。官网地址
Vuex:状态管理库。当你不知道它有什么作用时,说明你还不需要用到它。需要使用的可以进官网查看使用方法与场景,下面我也会简单介绍下vuex的简单用法。
CSS Pre-processors:是否需要使用css预处理器,比如:less,scss,stylus。
Linter / Formatter:调整ESLint的提示方式。
Unit Testing和E2E Testing:单元测试和E2E测试。很遗憾,楼主还没作深入了解,不作介绍。
PS:上下箭头移动选中光标,空格调整选中状态。回车进入下一步。
[^]: 楼主通常选择:Babel,Router,Vuex,CSS Pre-processors,Linter / Formatter。
若勾选Router会进入路由模式选择,请查看路由官网路由2种模式的区别再进行选择。
若勾选CSS Pre-processors会进入css预处理器选择,选择自己需要的就好了。
若勾选Linter / Formatter会进入选择ESLint的提示方式,通常我选择ESLint with error prevention only。其他没作了解。。。
Pick additional lint features:Eslint校验的时机。保存就检测和fix和commit时检测
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?:将配置信息保存在哪里。楼主一般是保存在package.json里。
Save this as a preset for future projects?:是否将此选择保存到预设(下次可直接选择后不再进行以上配置)
最后确定后将进行必要依赖安装,安装即全部完成。
启动
安装完成后,根据命令窗口提示,将命令窗口切换到项目目录:
1 | cd my-vue |
启动项目:
1 | yarn serve |
待命令执行完后,不出意外项目就启动好了。
根据命令窗口提示,在浏览器地址栏输入local的地址,你就可以访问你创建的项目了。就可以开始愉快的玩耍了。
远程仓库关联介绍
以码云为例(当然不是广告哈,我也希望是广告我还可以收点广告费呢),当然你可以使用其他git远程仓库服务。
创建新的远程仓库
填写必要信息:仓库名称(英文名,最好是和项目名称相同),仓库介绍:我觉得你应该必填,描述项目,不然项目多的你自己都不认得。
PS:使用Readme文件初始化这个仓库。最好是去掉勾选,保证仓库为空仓库(其他勾选也不要勾了)。不然关联vue-cli项目会产生一些不必要的问题。
将vue-cli项目和git远程仓库关联
远程仓库创建完成后会跳转到该项目的代码界面。没有文件的仓库应该是这个样子。
你可以设置自己的git全局设置。
然后使用已有仓库?下方的命令,当然若你的命令窗口已经在你的项目根目录后就不需要cd了。
vue-cli目录介绍
.git:为git工具文件,请不要手动修改它。
node_modules:webpack依赖包。请不要手动修改它。
public:里面的静态资源都不会经过webpack处理,当你的js或者css不需要经过webpack进行处理的时候可以直接放在这个文件夹。引用方式在index.html正常引用即可,当然最为安全的做法是类似favicon.ico文件的引用。<%= BASE_URL %>favicon.ico前面添加<%= BASE_URL %>
src:源代码目录
- assets:静态资源目录与public目录的区别是webpack会用各种处理器处理你引用过的资源,引用方式也不相同。下面我会接受assets里资源的引用。
- components:公共组件文件夹
- views:页面组件文件夹。你需要把所有的页面都理解成一个组件,所有的页面都是通过各种组件组成一个大的组件。
- App.vue:根组件。
- main.js:入口js
- router.js:路由js
- store.js:vuex相关
.gitignore:git忽略配置文件。
babel.config.js:babel配置文件。
package.json:依赖包列表。以及上方如果你选择将eslint及其他配置保存在这个里面,那你就应该在这个文件里配置相关的一些配置。
README.md:介绍文件,可以写一些项目描述啥的,可以和项目脱离。
vue.config.js:vue-cli中的webpack配置可以在里面设置。如果没有可自行建立。
yarn.lock:自动生成。和package-lock.json作用类似。请不要手动修改它。
开始开发
main.js入口文件介绍
当然你可以引入在这里引入额外的js或者全局css
静态资源引入方式介绍
1 | import "@/assets/js/index.js"; |
@符代表这src目录,而且我推荐你使用@符来书写路径,你甚至可以将上面的App.vue和router的路径都用@来表示。
组件介绍
对,最开始接触vue-cli的时候我也有这个疑问,.vue文件到底是个什么东西。
它就是个组件。你可以抽象的把它认为是一个div,你可以随意的把它放到任意地方。当然放置的方式可能和div放置有点区别。比如App.vue这个组件,是在main.js里引入,然后挂着到public/index.html的#app处,你可以理解成App.vue是用来替换这个public/index.html中div#app的。
1 | import App from './App.vue' |
组件结构介绍
组件包含(必须,省略这个的话组件好像没有意义了吧)
1 | <template> |
可包含js(不必须)
1 | <script> |
可包含css(不必须)
1 | <style lang="less" scoped> |
路由介绍
路由关系编写在router.js。
怎么理解路由这个概念呢,很简单:将匹配到的路由路径进行路由入口的组件替换。要是还不理解的话我下面还会讲到。
router.js:
1 | import Vue from 'vue' |
让我们回到App.vue看根组件的内容:
1 | <template> |
router-link在这里作为跳转按钮,to=”/“跳转到的路径为router.js中Home.vue组件的路由路径。当你点击