第一步, 去node 官网下载安装包安装node.
第二步, 安装nrm
npm install -g nrm
第三步, 使用nrm 管理软件源, 并把软件源切换成淘宝源
nrm ls
nrm use taobao
第四步, 安装yarn (也可以不安装yarn , 使用npm 构建项目, 但是yarn 会快一些),
npm install -g yarn
第 五步, 安装 vue-cli 和webpack
npm install webpack -g
npm install -g vue-cli
第六步, 使用vue-cli 构建项目
6.1 在硬盘中找一个合适的目录, 使用管理员权限打开powershell, 切换到刚才的那个目录,
比如 D:/goblog, 其中myblog 是项目名称, 这个名称不能包含大写字母, 不能包含空格等, 如果不符合规范, 会有提示。
vue init webpack myblog
6.2 根据提示, 选择选项
Project name , 项目名称
Project description 项目的简介
Author 作者
Vue-router, vue的路由管理器, 建议安装
Eslint es 代码规范
unit tests 单元测试
e2e test 单元促成
最后选择使用 npm 还是yarn build 项目
QQ截图20200114220114.png
成功后, 会出现如下截图
项目启动成功后.png
进入到项目中, 启动开发环境
cd myblog
npm run dev
启动成功后, 命令行出现如下提示
8080成功.png
然后,在浏览器中输入 localhost:8080 可看到如下页面
启动成功的页面.png
要点总结
1 各种工具要安装齐全
2 使用vue 初始化项目时, 最好使用管理员权限
3 通过nrm 把软件源切换到 taobao源, 能显著的提高速度
4 如果在初始化过程中出现了如下提示, 说明你需要安装 windows 下的 c++ 和python环境,
安装命令如下
npm install --global --production windows-build-tools
npm install --global node-gyp
npm 和 yarn 安装二选一即可。
yarn add global --production windows-build-tools
yarn add global node-gyp
缺乏环境.png
目录结构如下
build 目录是编译后的各种文件所在地
config 放各种配置文件
node_modules 是第三方依赖包 , 相当于php的vender目录
src 是日常编码的目录,
asset 是静态目录
components 是vue组件目录
router 是vue -route 目录
目录结构.png
网友评论