一、了解一下什么是Vue
Vue是:构建用户界面的渐进式框架,可以自底向上逐层应用(大概是这个意思?由基层开始做起,把基础的东西写好,再逐层往上添加效果和功能。)
二、vue-cli脚手架安装及运行过程:
(前期刚学时不建议直接安装vue-cli脚手架,可以直接通过<script></script>引入,如:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 然后直接用就行了)
1.首先Windows+R 打开cmd;输入npm -v 和node -v 检测是否安装了npm和node.js,没安装先去安装node.js(npm是随node.js一起安装的包管理工具,就不用安装了)附上node.js安装地址:
2.然后还需要淘宝镜像安装cnpm和webpack支撑(有时候安装依赖特别慢 就会用到cnpm)
淘宝镜像安装cnpm命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装之后 执行cnpm -v,如果出现相应的版本号就是安装成功
webpack安装命令:
npm install -g webpack
安装之后 执行webpack -v,它会问你:
Do you want to install 'webpack-cli' (yes/no):
直接回车就可以,然后再执行webpack -v,如果出现相应的版本号就是安装成功
3.最后就是安装vue-cli脚手架了
vue-cli脚手架安装命令:
cnpm install -g vue-cli
安装之后 执行 vue -V ,如果出现相应的版本号就是安装成功
4.用vue-cli创建一个基于webpack的新项目并运行
首先可以在桌面新建一个文件夹,如:Vue
然后执行cd Vue 进入文件夹,然后输入以下命令新建项目,回车
vue init webpack
然后根据提示一路回车,这时文件夹下就会有很多相关文件了
最后用cnpm安装依赖:
cnpm install
最后的最后 就是运行项目啦 输入以下命令:
cnpm run dev
或者以下命令也可以:
npm run dev
如果成功的话,一般就是提醒你可以在浏览器地址栏输入以下地址就能正常访问了
localhost:8080
至此,应该就可以正常访问一个新建的项目了,接下来的就是在新项目中通过组件、事件、指令等等丰富项目。
本文根据vue.js官方文档学习总结。附上官方文档: