vue+jQuery+bootstrap+sass项目搭建

VueJs项目搭建

1.安装nodejs

1).默认路径：C:\Program Files\nodejs\
2).安装完成后在nodejs文件夹下新建node_global和node_cache两个文件夹
3).执行命令：node -v 检测nodejs是否安装成功，npm -v 检测npm是否存在
4).安装express：(或以管理员的身份打开cmd)先安装一个命令工具 npm install -g express-generator
再执行命令npm install -g express，
在目录C:\Program Files\nodejs\node_modules\.bin中存在express和express.cmd两个文件，将目录添加到系统变量path中，
执行express --version 检测是否安装成功。

2.node环境下安装webpack

1).安装webpack：cnpm install webpack -g
2).安装css-loader和style-loader
3).配置文件：webpack.config.js
4).执行命令：webpack

3.安装vue.js

 cnpm install vue    //最稳定版

下载命令行工具，搭建vue项目

# 全局安装 vue-cli
$ cnpm install –global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
# 进入项目，安装并运行
cd my-project
npm install
npm run dev

4.Vue项目中引入jQuery和bootstrap

1).引入jQuery

*下载jQuery：cnpm install jquery –save-dev
*修改 webpack.base.conf.js 中的两个地方
第一：加入 var webpack = require(‘webpack’)
第二：在module.exports中加入

plugins:[
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
    jQuery:'jquery',
    $:'jquery'
    })
]

*在main.js中加入
import $ from 'jquery'
window.jQuery = $

2).引入bootstrap文件
修改 webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    'bootstrap':resolve('src/assets/bootstrap') //手动导入的bootstrap文件需要加这句话，
    若是cnpm install bootstrap --save下载的则不需要加
    }
},

在main.js中导入bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'
在App.vue中将template模板替换成bootstrap模板，测试是否运行成功

5.Vue中使用sass

1).安装sass的依赖包

    cnpm install sass-loader --save-dev  //sass-loader依赖于node-sass
    cnpm install node-sass --save-dev

2).在build文件夹下的webpack.base.conf.js的rules里面添加配置

    {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
    }

3).在App.vue中修改style标签

    <style lang="scss"></style>
    如果用<style lang="scss"></style>则去掉css语法中的大括号和分号

style中的样式注释掉，添加测试代码,运行项目后body变为灰色则添加sass成功

$background:#ccc;
body{background:$background}

4).运行项目

    cnpm run dev 

Vue目录解读

├─build //保存一些webpack的初始化配置
├─config //保存一些项目初始化的配置
├─node_modules //npm加载的项目依赖的模块
├─src // 开发目录
│ ├─assets // 资源文件目录，需要打包的放到该目录下
│ ├─components //放置组件文件
│ ├─assets
│ │ ├─logo.png │
│ ├─App.vue　　 //项目入口文件
│ ├─main.js 　　// 预编译入口，项目的核心文件
├─static //放置静态资源目录
├─.babelrc 　　// babel配置文件
├─.gitignore
├─index.html 　　// 主页
├─package.json 　　// 项目配置文件
├─README.md
├─webpack.config.js // webpack配置文件

main.js:
import Vue from ‘vue’ : 引入vue
import App from ‘./App’ : 引入App.vue文件
import router from ‘./router’ : 引入路由配置