一、创建vue项目前配置

第一步: 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源

( 以后再用到npm的地方直接用cnpm来代替就好了 ) 检查是否安装成功：cnpm -v

第二步: 全局安装vue-cli

安装vue-cli的两种方式：输入cmd命令
npm install -g @vue/cli //这个是从国外下载的比较慢 √
cnpm install -g @vue/cli //这个是从镜像源下载

查看安装的版本（显示版本号说明安装成功）
vue --version

***问题一 : 出现下面这样的情况需要下切换node版本 ( 版本需要12.0.0以上或者大于等于14.0.0 ) 没有出现则跳过.

***切换node版本使用nvm：

（一） : 下载nvm 点击下面百度网盘链接下载-->安装

链接：https://pan.baidu.com/s/1RbbmkrRPWzvPU85JQ7H1KQ
提取码：2001

（二）: 点击window 进入powershell，以管理员身份运行

查看nvm版本 : nvm -v

查看可下载node版本 : nvm ls available

查看环境中的 node 版本 : nvm ls ( 前面有*号的表示当前使用的node版本号 )

下载符合要求版本的node : nvm install 14.16.0

使用 14.6.0版本的node : nvm use 14.16.0

查询当前node 版本号 : node -v

***可略过 : 如果你原来有版本或者版本比较低，可以升级
npm update -g @vue/cli

yarn global upgrade --latest @vue/cli

第三步：创建vue项目

第一步 : window+R----->cmd----->vue -V 查看 vue-cli版本

第二步: vue ui --会打开一个vue项目管理器

第三步: 创建vue项目

进行手动配置

点击下一步出现选项:

Choose Vue version --是否选择vue版本 √

Babel --代码编译器(把代码转为低版本兼容) √

TypeScript --TS技术:js的超级加强 (不是必须选项)

Progressive Web App(PWA) Suport --项目离线访问 (不是必须选项)

Router --路由 √

Vuex --vue状态管理器(管理数据的) √

CSS Pre-processors --css预处理器(sass/scss) √

Linter / Formatter --语法书写规范(代码书写不规范会报错,相互但与开启严格模式) (不是必须选项)

Unit Testing --基于用户测试工具 (不是必须选项)

E2E Testing --基于服务端测试工具 (不是必须选项)

使用配置文件 --配置文件 √

选择好之后点击下一步: 创建好了

从0开始创建vue工程化项目~相关推荐

使用vue-cli创建Vue工程化项目及单文件组件的创建和调用
文章目录 1. Vue 单文件组件的优势 2. cli 创建 Vue 工程项目 3. 单文件组件的创建和调用 1. Vue 单文件组件的优势把一个组件全部内容汇合到一个文件中,文件名字是以 .vue ...
Vue工程化项目创建-VueCli与Vite
在完成了node.js的安装之后,我们就可以正式来创建我们的Vue工程化项目了,我目前学习到两个创建工程化项目的工具是Vue-Cli还有Vite,其中VueCli可用于创建vue2与vue3的项目,而 ...
VUE 3——3：脚手架构建工具介绍及在创建 Vue 3 项目中的应用
这是针对 Vue 新人的一个简单指导. 在前面的文章中,我们不推荐新手直接使用 vue-cli,(尤其是在还不熟悉基于 node.js 的构建工具时),而是通过直接引用的方式: <script ...
【创建Vue手脚架项目】
创建Vue手脚架项目备忘录安装Node.js Node.js 16.14.2 LTS WinX64官网下载: https://mirrors.tuna.tsinghua.edu.cn/nodejs ...
【vue项目实战】Vue工程化项目--猫眼电影移动端（二）
vue工程化第二节添加内容和样式使用axios请求数据,参考这里添加局部左右滑动(即将上映页),参考 (左右滑动也可使用插件) 组件化开发,相同代码可以提取出来作为一个组件来调用,减少代码量,提 ...
【vue项目实战】Vue工程化项目--猫眼电影移动端
这里是仿猫眼移动端.使用 vue-cli 创建项目. 本节先介绍并进行项目的初始化,然后把主框架搭起来,熟悉路由和组件,后面在项目demo 持续贴出完整项目代码.也会更新博客. 第二节传送 ...
体验使用node.js创建vue+Element-UI项目
1.首先去node.js官网下载系统对应的node.js版本. 2.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao. ...
创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能一. 后台代码二.前端工具是webstorm,直接上测试相应js接口三.相应的页面四.效果展示上一片文章总结了下如何创建一个vue项目,前端框架使用iv ...
在阿里云从0开始部署vue+springboot项目
我很生气服务器被黑了,top ps命令被修改,top下面的进程基本都是0占用率,控制台看到的cpu是100,找不到原因,一开始我还以为是显示错了,后来仔细看,top查看到ni(nice cpu ti ...

从0开始创建vue工程化项目~

一、创建vue项目前配置

第一步: 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像源

第二步: 全局安装vue-cli

第三步：创建vue项目

从0开始创建vue工程化项目~相关推荐

最新文章

热门文章