小白初次使用vue搭建项目框架

原创 15719493082 教程 Vue 833阅读 2017-06-24 17:23:20 举报
一直想学习vue,却不知道该如何上手。摸索了一段时间,各种环境变量的配置啊,安装node.js 最后利用vue自带的脚手架vue-cli初始化一个项目

vue-cli是一个vue官方发布vueJS项目教手架,里面集成了webpack打包工具,对于初学者来说,非常的合适,避免了各种webpack的配置问题。下次再做深入的研究

1.安装node环境
https://nodejs.org/en/download/ 选择对应电脑的版本 双击 点击安装即可
在cmd下用 node -v 测试是否安装成功 默认是自带npm的 用npm -v测试
2.环境变量的配置
个人不喜欢放在默认的【C:\Users\用户名\AppData\Roaming\npm】路径中 ,需要设置全局模块的所在路径和缓存所在的路径,具体的可以参考
Node.js安装及环境配置之Windows篇

如果安装好的话 进行测试的时候 你可以安装一个全局的模块进行测试,看是否是在你自定义的文件夹中,(一定要注意测试,最开始发现环境变量没有配置好,还是安装在了默认的环境下)

3.安装各种需要的全局模块
安装cnpm 命令npm install -g cnpm --registry=https://registry.npm.taobao.org
安装webpack npm install -g webpack //全局安装
最后安装全局的脚手架 (视个人情况而定) npm install -g vue-cli //全局安装vue-cli

4.切换到建立项目的路径下
cd 文件路径
vue init webpack projectName /生成项目名为projectName的模板,这里的projectName是你的项目名
注意:必须要先安装vue-cli才可以的,不然会认为vue是不存在模板的

这里会有一些输入的东西,根据自己需要进行填写

5.用对应的IDE打开创建的项目
使用npm install 进行初始化安装的依赖

项目结构图

6.运行项目
npm run dev 直接就可以了

提醒:如果需要其他的模块 直接用npm install即可,下载很慢or失败
可以用淘宝镜像 npm config set registry https://registry.npm.taobao.org (参考网页http://blog.csdn.net/nzb329/article/details/51935236)
特别是install node-sass最容易失败。

好了,这就是整个的流程 。以上只是个人观点 ,如有不对,请指正。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复