Vue Vue-Cli

Vue-Cli

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

安装

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

配置VSCode环境

插件：

1. Vetur 支持vue文件
2. 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。