cmd 搭建vue前端项目

下载nods.js

node.js下载(Windows版本)
next 安装完毕!

配置node.js环境变量

进入找到Path进入
进入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 回车启动服务

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

浏览器进行访问

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐