Vue Vue-Cli

Vue-Cli

一个由Vue官方开发的脚手架，可以快速的开发一个网站。

安装

npm install vue-cli -g vue init webpack project-name

配置VSCode环境

插件：

Vetur 支持vue文件VueHelper 代码提示

配置：

让vscode支持vue文件的高亮，在setting.json里（vscode的配置文件），添加以下字段：

"files.associations": { "*.vue": "vue" }

目录结构

. ├── build # webpack配置文件目录（一般不用改） │ ├── build.js # 生产环境构建 │ ├── check-versions.js # 版本检查（node、npm） │ ├── dev-client.js # 服务器热重载（开发时用，自动刷新） │ ├── dev-server.js # 构建本地服务器 │ ├── utils.js # 构建相关工具 │ ├── vue-loader.conf.js # css加载器配置 │ ├── webpack.base.conf.js # webpack基础配置 │ ├── webpack.dev.conf.js # webpack开发环境配置 │ └── webpack.prod.conf.js # webpack生产环境配置 ├── config # Vue配置文件目录 │ ├── dev.env.js # 项目开发环境配置 │ ├── index.js # 项目主要配置 │ └── prod.env.js # 项目生产环境配置 ├── src # 项目核心文件目录 │ ├── App.vue # 根组件 │ ├── assets # 静态文件目录（CSS/JS等） │ ├── components # 组件目录 │ ├── main.js # 入口文件 │ └── router # 路由配置目录 │ └── index.js # 默认路由配置文件 ├── static # 静态文件目录（一般放图片） ├── index.html # 主页 └── package.json # Node的配置文件

main.js（入口文件）

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例

后期还可以引入插件，当然首先得安装插件。

App.vue（根组件）

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

components（组件目录）

可以将自定义的组件放到这里面

从外部引入css

使用css-loader插件可以让vue内的style通过外部引入的方式引入进来，这样可以让代码更简洁。

安装：

$ npm install css-loader

使用：

<style> import './assets/css/public.css' </style>

router（路由配置目录）

router目录下默认有一个index.js文件，里面是配置路由的。

@符号

在index.js文件中可以看到这样一句代码：

import Hello from '@/components/Hello'

默认情况下@代表/src目录，在build/webpack.base.cof.js中可以修改这个选项。

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') // 这里就是@所指的路径 } },

修改路由配置文件报错

如果使用ESLint（代码规范检查器）进行开发，那么改动了src/router/index.js中的代码，即使多了一个回车都会出现报错。

解决方法：在build/webpack.base.cof.js中注释掉以下内容后重新npm run dev。

{ test: /\.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter') } },

如果对这个工具有需要的话，可以进行设置来避免这个情况。

vue文件

.vue文件就是一个html文件，注释和其他使用都和html一致。

但是vue大多数情况下是指一个组件，一个组件包含template、script和style。