Vue 脚手架是 Vue 官方提供的标准化开发工具
初始化
1.全局安装 npm i @vue/cli -g
2.打开cmd,cd到桌面:输入 vue create vue_test
(vue_test是根文件夹名)
3.显示如下,选择Vue2或者Vue3
4.等待完成(打开根目录,如下图),在创建的根目录用vscode打开
vue_test:
.文件目录
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
5.运行(如上图),取消运行 CTRL+C
6.ctrl+click,然后显示如下(如上图)
7.npm run build(如上图)
会在根目录下生成文件夹 dist,(需要放在服务器下才能正常打开页面)
添加
public:css样式库
src:路由(router、pages(路由组件))、vuex(store)注意都是index.js
src/assets:一些静态资源,如图片、音频
提一下 src/main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el:'#app',
// render函数功能:将App组件放入容器中
// 简写形式
render: h => h(App),
// 完整形式
// render(createElement){
// return createElement(App)
// }
})