cmd搭建vue前端项目详细过程

cmd 搭建vue前端项目

下载nods.js

node.js下载（Windows版本）
next 安装完毕！

配置node.js环境变量

进入找到Path进入

这里填你的node.js的安装路径

验证node.js

打开cmd    输入node -v

安装配置完成可以看到版本

配置全局安装路径和缓存

新建node_global文件夹，npm_cache文件夹，位置自定
配置全局模块的安装路径到node_global文件夹，npm缓存到npm_cache文件夹

设置全局模块的安装路径到 “node_global” 文件夹，
设置缓存到 “node_cache” 文件夹

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"
npm config list #查看npm设置，看设置成功没有

并在环境变量中配置，方便命令操作

准备安装Vue-cli

由于官方源下载比较慢，换成淘宝源
按照官方文档说明，安装命令为“npm install -g @vue/cli”

npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npmjs.org/ #原厂库地址，以便还原

npm install -g @vue/cli #安装命令

cmd命令窗口输入 vue -V（V大写） 回车，能正常显示@vue/cli版本

创建vue项目

在cmd 切换到准备存放项目得目录下

vue create 项目名 

项目名要小写

本次选择手动

选择自己需要的特性（上下键移动键，空格键是否选中，a 键切换选择所有，i 键反转选择选项），然后回车

( ) Babel // 支持高阶语法转换

( ) TypeScript // 支持使用 TypeScript 书写源码

( ) Progressive Web App (PWA) Support // 支持PWA

( ) Router // 路由

( ) Vuex // store

( ) CSS Pre-processors // CSS 预处理器

( ) Linter / Formatter // 代码风格检查和格式化

( ) Unit Testing // 支持单元测试

( ) E2E Testing // 支持E2E测试

选择版本

提示是否选择历史路由 选择 “n”

这一步提示我们在项目里面需要支持何种动态样式语言，我们选择第二个（上下键移动键），回车

这一步提示我们选择配置文件的位置，因为每个插件都有自己单独的配置文件，我们选择第一个，回车

这一步提示我们是否将当前配置选项保存起来，方便下次创建项目时使用。输入 n ，回车

下载依赖包，创建项目

报错

I am using “vue-cli 3.0.0-rc.1”, I solve the problems by setting the ~/.vuerc from “useTaobaoRegistry”: true, to false.

翻译：意思是，在我们使用vue-cli3.0时，通过设置json文件~/.vuerc里面的配置：“useTaobaoRegistry”: true; 这样就可解决问题。

解答1："useTaobaoRegistry"原先是false，将其设置为true。

解答2：文件，~/.vuerc的位置：
C:\Users\K 下

cmd窗口输入命令 项目名进入项目，再输入 npm run serve 回车启动服务

浏览器进行访问