本文的学习来自技术胖大神的教程:https://jspang.com/
Vue-cli是vue官方出品的快速构建单页应用的脚手架
开发一个项目,在开始的时候,会构建项目结构、webpack、怎么运行、编写一些node指令等,还有在项目生产中用的命令,都需要做一个提前的编程。Vue-cli就做了这些事情,只要把它安装上,并进行初始化和一些简单的设置,就自动做好了在开发时需要的环境和结构目录,开发人员只专心的编写代码就可以了。
Vue-cli牵扯的东西很多,有webpack,npm,nodejs,babel等。
1安装vue-cli
前提:安装好nodejs。
在电脑上新建一个目录vueCli,然后在目录中cmd,输入命令:
npm install vue-cli -g
查看版本:
vue -V,注意V要大写
2项目初始化
vue init webpack 项目名
安装完成,可以看到:
输入这两个命令:
就可以预览了:
目录结构:
3 vue-cli项目结构
4 Vue-cli的模板
就是src下的文件,是开发中需要编写的。
4.1 npm run build 命令
如何把写好的Vue网页放到服务器上,就是要用到npm run build 命令。
输入npm run build命令后,vue-cli会自动进行项目发布打包。
在package.json文件的scripts字段中可以看到,执行npm run build命令就相当于执行node build/build.js 。
执行完npm run build命令后,在项目根目录会生成dist文件夹,这个文件夹里边就是要传到服务器上的文件。
4.2 main.js文件
main.js是整个项目的入口文件,在src文件夹下:
可以看到通过 import App from‘./App’这句代码引入了App的组件和的模板,找到App.vue文件,打开查看:
4.3 App.vue文件
app.vue文件分成三部分:
1)<template></template>是模板的HTMLDom结构
2)<script></script>中是js内容:页面的动态效果和Vue的逻辑代码
3)<style></style>中是css内容:写的CSS样式,如果加上scoped:写成<style scoped></style>表示这些css样式只在本模板中起作用。不加scoped说明可以全局起作用。
4.4 router/index.js 路由文件
import Hello from ‘@/components/Hello’ 说明引入了/components/Hello.vue文件。这个文件里就配置了一个路由,就是当访问网站时显示Hello.vue的内容。
4.5 Hello.vue文件
这个文件就是上面当项目启动时展示的页面
也是分为<template><script><style>三个部分,可以试着改一些内容,然后预览一下:
4.6总结
拿到一个项目后,先找入口文件:
在Build/webpack.base.conf.js中:
说明入口文件是main.js
在main.js中引入了App.vue和router
在App.vue中没有什么重要的,
而在router/index.js中可以看到,引入了HelloWorld
打开Hello.vue,就会看到主要的页面内容了。
同样的,如果想添加其他components,也要像Hello.vue这样写。
开发项目中,大部分工作都是写这些.vue结尾的文件。