Vue脚手架创建项目目录详解
文章内容参考: https://www.cnblogs.com/chenleideblog/p/10432375.html
Vue项目的创建
使用图形界面创建Vue项目
# 安装vue
npm install -g @vue/cli
# 进入DOS终端
vue ui
# 自定义创建项目
...
Vue目录分析
以下就项目文件夹中的各文件的作用进行介绍：
├── build/ # Webpack 配置目录
├── dist/ # build 生成的生产环境下的项目
├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/ # 依赖包，通常执行npm i会生成
├── src/ # 源码目录（开发的项目文件都在此文件中写）
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│ ├── components/ # 公共组件
│ ├── filters/ # 过滤器
│ ├── store/ # 状态管理
│ ├── routes/ # 路由，此处配置项目路由
│ ├── services/ # 服务（统一管理 XHR 请求）
│ ├── utils/ # 工具类
│ ├── views/ # 路由页面组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
├── index.html # 主页，打开网页后最先访问的页面
├── static/ # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc # Babel 转码配置
├── .editorconfig # 代码格式
├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json # 本项目的配置信息，启动方式
├── package-lock.json # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md # 项目说明（很重要，便于其他人看懂）
我们以后用到最多的就是src文件夹，因为我们编写的代码要放在里面
在根目录下存在index.html文件
在src目录下存在main.js，App.vue以及在router文件夹下存在index.js
index.html---主页，项目入口
index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页title</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue---根组件
我们在Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，分别用
<template>
<!-- 组件代码区域-->
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
// 这里用于定义Vue组件的业务逻辑
export default {
data: (){ // 私有数据
return {}
},
methods: {}, //处理函数
},
// ...其他业务逻辑
</script>
<!--scoped 的作用: 防止样式组件之间的冲突,作用域:当前文件-->
<style scoped>
样式代码区域
</style>
我们可以将上述三个部分理解为原来我们学习前端的html，javascript与css三个部分。
补充：
【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）
打一个比喻吧，
【script】
vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。
【style】
样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，
如要引入外部css文件
首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。
安装完成后，就可以在style标签下import所需的css文件。
这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用
<style>
import './assets/css/public.css'
</style>
main.js---入口文件
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例
下图中的components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
import Vue from 'vue' /*引入vue框架*/
import ElementUI from 'element-ui' /*引入element-ui样式*/
import App from './App' /*引入根组件*/
import router from './router' /*引入路由设置*/
Vue.config.productionTip = false /*关闭生产模式下给出的提示*/
/*定义一个新实例*/
new Vue({
router,
render: h => h(App) // 使用render函数渲染App.vue单文件组件
}).$mount('#app') // 将该实例挂载到 #app中
index.js---路由配置
在router文件夹下，有一个index.js文件，即为路由配置文件。
import Vue from 'vue' /*引入vue框架*/
import Router from 'vue-router' /*引入路由依赖*/
import Hello from ‘@、components/Hello’ /*引入页面组件，命名为Hello*/
Vue.use(VueRouter) /*使用路由依赖*/
/*定义路由*/
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
这里定义了路径为'/'的路由，该路由对应的页面是Home组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Home组件.类似的，我们可以设置多个路由，‘/index’,'/list'之类的，当然首先得引入该组件，再为该组件设置路由
