vue 搭建前端项目 ---目录结构描述以及jquery／bootstrap 的引入（一）

一：运行项目

进入到下载的开发版项目路径中执行：npm run dev

vue-cli项目结构大纲

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

config/index.js文件

描述了开发和构建两种环境下的配置，前面的build文件夹下也有不少文件引用了index.js里面的配置。

var path = require(‘path‘)
module.exports = {
  // 构建产品时使用的配置
  build: {
    // 环境变量
    env: require(‘./prod.env‘),
    // html入口文件
    index: path.resolve(__dirname, ‘../dist/index.html‘),
    // 产品文件的存放路径
    assetsRoot: path.resolve(__dirname, ‘../dist‘),
    // 二级目录，存放静态资源文件的目录，位于dist文件夹下
    assetsSubDirectory: ‘static‘,
    // 发布路径，如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器，可以在这里进行设置
    // 设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径
    assetsPublicPath: ‘/‘,
    // 是否使用source-map
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    // 是否开启gzip压缩
    productionGzip: false,
    // gzip模式下需要压缩的文件的扩展名，设置js、css之后就只会对js和css文件进行压缩
    productionGzipExtensions: [‘js‘, ‘css‘],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    // 是否展示webpack构建打包之后的分析报告
    bundleAnalyzerReport: process.env.npm_config_report
  },
  // 开发过程中使用的配置
  dev: {
    // 环境变量
    env: require(‘./dev.env‘),
    // dev-server监听的端口
    port: 8080,
    // 是否自动打开浏览器
    autoOpenBrowser: true,
    // 静态资源文件夹
    assetsSubDirectory: ‘static‘,
    // 发布路径
    assetsPublicPath: ‘/‘,
    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 例如将‘localhost:8080/api/xxx‘代理到‘www.example.com/api/xxx‘
    proxyTable: {},
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    // 是否开启 cssSourceMap
    cssSourceMap: false
  }
}

二：引入jquery/bootstrap

1:项目路径下：

A 控制台运行: npm install jquery --save-sev

B 然后修改build文件夹下 webpack.base.config.js文件

C 头部添加：

var webpack=require("webpack");

在module.exports里面添加

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

最后在main.js中加入import $ from "jquery"

2 bootstrap:

A 在src/assets文件夹下创建bootstrap文件夹 ，将bootstrap官网上下载的项目放在bootstrap中

B 然后修改webpack.base.config.js:

resolve:{
　　extensions: ['.js', '.vue', '.json'],
　　alias: {
　　'vue$': 'vue/dist/vue.esm.js',
　　'@': resolve('src'),
　　'bootstrap':resolve('src/assets/bootstrap'),
　　}
},

C main .js 中import 引入

import'bootstrap/js/bootstrap.min.js'
import'bootstrap/css/bootstrap.min.css'

然后运行项目就可以了