vue项目搭建及使用心得

近期在学习VUE的也做了点简单的例子，还是碰到不少问题的，以下作为本人的记录分享给大家。

1. 需要预装node使用npm
2. 创建VUE项目
3. webpack打包项目

一、需要预装node使用npm

怎么安装nodejs就不多说了，网上有甚多教程
检测node安装结果

C:\Users\vtwov\node -v
v8.11.2
C:\Users\vtwov\npm -v
5.6.0

至此，安装成功。

windows更改node的全局模块的安装路径到node_gobal文件夹，缓存到node_cache文件夹。
进入cmd命令行，输入一下的命令设置：

npm config set prefix "D:\Program Files\nodejs\node_gobal"
npm config set cache "D:\Program Files\nodejs\node_cache"

更新node命令

npm install -g npm

二、创建VUE项目

npm install vue
npm install -g vue-cli
vue init webpack ivue
cd ivue
npm install
npm run dev

访问http://localhost:8080

三、打包项目

npm run biuld

在项目里生成dist文件，但是无法直接访问，可直接放到项目中访问。
如果在本地访问需要更改配置
项目打包之后，找到config/index.js

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', // 此处是更改的内容

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 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
    productionGzip: false,
    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
    bundleAnalyzerReport: process.env.npm_config_report
  }

再找到build/until.js

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'   // 增加此条信息
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

然后在运行

npm run biuld

再次点击dist/index.html即可正常查看

ps:以上仅此本人整合的一些信息如有不对的