怎么做网站交易/网站维护需要学什么

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。