创建一个vue-cli项目到运行的完整流程

安装vue

1，npm install vue

安装完成可通过 vue -V来查看是否安装了vue，以及vue的版本号
2，npm install -g cnpm --registry=https://registry.npm.taobao.org
对于中国大陆用户，建议将 NPM 源设置为国内的镜像，可以大幅提升安装速度。

安装vue-cli

1，npm install -g @vue/cli

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。

安装之后通过vue --version来验证是否安装成功
卸载脚手架重新安装 npm uninstall vue-cli -g
升级全局的vue-cli包 npm update -g @vue/cli
上面列出的命令是用于升级全局的vue cli，如需升级项目中的vue cli，请在项目目录下运行 vue upgrade

创建一个项目

1，vue create hello-world
2，选默认的包含了基本的 Babel + ESLint 设置的 preset，这个默认的设置非常适合快速创建一个新项目的原型

修改babel.config.js

module.exports = {
    presets: [
        ['@vue/app', {
            polyfills: [
                'es.promise',
                'es.symbol'
            ]
        }]
    ]
}

预处理器

安装 Sass

npm install -D sass-loader sass

安装Less

npm install -D less-loader less

安装stylus

npm install -D stylus-loader stylus

在项目中.vue文件中使用

<style lang="scss">
$color: red;
</style>

小tips:npm 安装时 -D，即–dev（开发），包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用，如Babel，sass-loader这些解析器。

安装webpack

//全局安装
npm install webpack -g
//or 项目根目录中安装
npm install webpack --save-dev

webpack（网页包）相关简单的配置方式

vue.config.js 中的 configureWebpack 选项提供一个对象：

module.exports={
	configureWebpack:{
		plugins:[
			new MyAwesomeWebpackPlugin()
		]
	}
}

有些webpack选项是基于 vue.config.js 中的值设置的，所以不能直接修改。例如你应该修改 vue.config.js 中的outputDir(输出目录)选项而不是修改output.path；你应该修改 vue.config.js 中的publicPath 选项而不是修改 output.pablicPath。这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

module.exports={
	configWebpack:config=>{
		if(process.env.NODE_ENV==='production'){
			//为生产环境修改配置...
		}else{
			//为开发环境修改配置...
		}
	}
}

cd[/d][X:]进某个路径，存放我们要建的项目，否则会默认路径建项目

vue init webpack "项目名称"

等项目初始化完以后cd进所在的目录

cd '项目所在文件夹'

运行项目

npm run dev