首页 > 程序开发 > web前端 > HTML/CSS > 正文
Vue-Cli、VSCode环境配置
2017-08-10 09:47:04       个评论    来源:  
收藏    我要投稿

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

使用:

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。

点击复制链接 与好友分享!回本站首页
上一篇:WebAnimationsAPI(JS动画利器)
下一篇:angular自定义指令详解Directive
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 |
版权所有: 88bifa.com--致力于做实用的IT技术学习网站