vue.js从入门到放弃1--环境安装，包括linux和window

1.windows安装vue.js环境。

1.1 先决条件，本地装了npm安装环境，查看的话，就新建一个目录，然后shift+右键->在此处打开命令行。 然后输入

npm -v

去查看npm的版本

1.2 更新npm的版本到最新的版本

npm i -g npm

1.3 安装cnpm，这是淘宝的npm资源，安装vue会快很多,然后将npm设置registry设置成淘宝的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org 
//所有的安装操作完成后，用下面命令看npm是否使用的是淘宝的镜像
npm config get registry  //正确的输出是 https://registry.npm.taobao.org cnpm -v                  //有输出即为cnpm安装正常

1.4 用cnpm安装 vue-cli

cnpm install -g vue-cli  //-g 表示global

1.5 初始化vue的项目

vue init webpack my-project //其中webpack为模板的名字，是写死的。 my-project为项目名，这个可以自行修改
cd my-project  //进入项目目录
cnpm i         //安装package.json里面的依赖包

1.6 完事具备， 开发模式走起

//在项目目录里运行下面代码,运行完成后会自动跳转到localhost:8080的浏览器页面，然后开发的改动会直接生效
npm run dev

1.7 开发完成，打包release包

//在项目目录下运行下面的命令。运行完成后会生成dist文件 这里面的index.html就是你要的生产版本的文件啦
npm run build

2.linux安装vue.js环境。

步骤和windows版完全一致。走完1.1-1.5的步骤。

需要注意的点：

2.1 出现如下的报错：

Error: listen EADDRINUSE :::8080
at Object.exports._errnoException (util.js:874:11)
at exports._exceptionWithHostPort (util.js:897:20)
at Server._listen2 (net.js:1234:14)
at listen (net.js:1270:10)
at Server.listen (net.js:1366:5)
at EventEmitter.listen (/data/www/html/xuechaozhang/my-project/node_modules/express/lib/application.js:618:24)
at Object.<anonymous> (/data/www/html/xuechaozhang/my-project/build/dev-server.js:84:18)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Function.Module.runMain (module.js:467:10)
at startup (node.js:134:18)
at node.js:961:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@1.0.0 dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2017-05-22T11_15_02_379Z-debug.log

其实关键点就是第一句话listen EADDRINUSE :::8080。这个表示8080端口已被占用，你可以通过

netstat -anp | grep 8080

来查看是否被占用，如果有返回值就表示被占用，然后找一个没有返回值的端口。

然后修改

my-project/config/index.js

文件：

修改内容如下：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',//这个原本是/,表示assets文件在服务器设置的根目录，这样会报错的，需要修改成./表示当前目录
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
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
},
dev: {
env: require('./dev.env'),
port: 8085,//这个是表示监听的端口，原来是8080，如果服务器的8080被占用，可以修改成其他端口
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
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: false
}
}

3.webpack 目录说明

目录结构如下，config目录下是配置文件，src是我们平常需要修改代码的地方