创建一个新的vue项目进行开发的完整流程
安装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