使用vue-cli初始化一个项目结构
- 安装：
npm i -g vue-cli
- 脚手架生成项目结构：
vue init webpack 项目名称
/asset 项目中的静态资源
index.css 项目的全局样式
/components 项目中的组件
/router 项目中的路由文件
index.js 所有的路由组件
APP.vue 项目的根组件，只有一个路由出口
main.js 整个项目的入口，也是webpack打包的入口
开启一个新功能
- 在
components目录中创建组件
- 在
router/index.js中配置路由
使用element-ui组件库
- 安装：
npm i element-ui -S
- 在main.js中导入：
- js文件：
import ElementUI from 'element-ui'
- 样式：
import 'element-ui/lib/theme-chalk/index.css'
- UI插件：
Vue.use(Element-UI)
在组件中使用预编译css
- 安装:
npm i -D less less-loader
抽离单文件组件的内容
- 说明：如果将所有的template、script、style都放在.vue文件中，那么，这个文件会变得非常臃肿。可以将不同的内容，抽离到单独的文件中
<!--将模板抽离到当前目录下的：template.html文件中-->
<tempalte src="./template.html"></template>
<!--将js抽离到当前目录下的：sccript.js文件中-->
<script srcc="./script.js"></sccript>
<!--将style抽离到当前目录下的：style.css文件中-->
<style src="./style.less" lang="less"></style>
