Vue cnpm vue - cli4.1.1 项目初始化 (详细 流程)

1.node npm环境初始化

1.1 下载

官网下载 node Js

1.2 安装

解压node js 安装包

配置 nodejs主目录到path

PATH
//配置 vue 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global
PATH
//配置node 指令
F:\Web developer tool\node_js\node-v12.13.0-win-x64
PATH
F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_modules
cmd npm -v 输出 npm版本

cmd 设置 node缓存目录 启用 npm

node 主目录 打开 cmd
npm config set prefix “\node_global”
npm config set cache “\node_cache”

测试npm,安装个express:

npm install express -g
安装完毕后,就可以在F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\node_modules路径下看到express文件夹。

2.安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v 查看版本

3.vue-cli4.1.1 脚手架工具安装

vue cli 4.1.1安装

cnpm install -g @vue/cli
输入 vue -V 查看版本

 F:\Web developer tool\node_js\node-v12.13.0-win-x64>"node"  "F:\Web developer tool\node_js\node-v12.13.0-win-x64\node_global\\node_modules\@vue\cli\bin\vue.js" -V
@vue/cli 4.1.1

4.vue-cli4.1.1 构建项目

找到项目文件路径
vue create vue-test //vue-test是项目名称 采用驼峰命名不能包含大写字母
选择 Manually select features手动配置
空格键选择需要组件

在这里插入图片描述
在这里插入图片描述

创建完 进入项目目录 执行 cnpm run server

F:\Projects\Web storm Projects\vue-test>cnpm run serve
> wlnews@0.1.0 serve F:\Projects\Web storm Projects\wlnews
> vue-cli-service serve
 INFO  Starting development server...
  App running at:

- Local: http://localhost:8080/
- Network: http://192.168.0.104:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.

还可以通过 vue ui 管理项目

vue ui 运行启动 管理页面
在这里插入图片描述

5. 使用webstorm创建配置Vue运行环境

在这里插入图片描述
点击右上角 运行

在这里插入图片描述
运行成功

在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章