VUE 模板创建以及 常用依赖安装

使用webpack模板

vue init webpack my-project

本文示例运行于vue-cli(v2.8.1),命令行提示如下：

? Project name (my-project) //请输入项目名称，回车默认

? Project description (A Vue.js project) //请输入项目描述，回车默认

? Author xsl <398818817@qq.com> //请输入作者名，回车默认

? Vue build //请选择构建模式，请直接回车选择第一条

> Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific

HTML) are ONLY allowed in .vue files - render functions are required elsewhere

? Install vue-router? Yes //是否安装vue-router,回车

? Use ESLint to lint your code? Yes //是否安装ESLint代码检查器，回车

//个人比较偏爱airbnb的编码规范，此处选择第二项

Standard (https://github.com/feross/standard)

>AirBNB (https://github.com/airbnb/javascript)

none (configure it yourself)

? Setup unit tests with Karma + Mocha? Yes //单元测试，请按需选择

? Setup e2e tests with Nightwatch? Yes //端到端测试，请按需选择

如果对于eslint报错并不明白的，可以参考eslint官方文档提供ESLint代码检查规则索引;

 

 

安装依赖 :  npm  install 

 

1.Vue引入jquery

使用命令npm install jquery --save-dev 安装jquery。

 

--save-dev表示自动添加配置依赖到package.json文件的devDependencies中,开发环境

如果只加--save表示自动添加配置依赖到package.json文件的dependencies中，生产环境

 

在webpack.base.conf.js中添加如下内容：

var webpack = require('webpack')

和

plugins: [

new webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery"

})

],

在main.js中配置全局配置

import $ from 'jquery'

 

2.Vue引入bootstrap

安装bootstrap，使用命令npm install bootstrap --save-dev

在main.js中添加如下内容：

import 'bootstrap/dist/css/bootstrap.min.css'

import 'bootstrap/dist/js/bootstrap.min'

 

3.引入Less

1.安装less和less-loader  : 命令：cnpm install less less-loader --save

2.配置less: 路径：build---webpack.base.conf.js添加

{

test: /\.less$/,

loader: 'style-loader!css-loader!less-loader'

}

 

4.引入swiper

    

    cnpm install swiper --save-dev

在mins中引入

import 'swiper/dist/css/swiper.css';

插件在哪写在哪引入

import Swiper from 'swiper';