关于搭建Vue项目的顺序及遇到的问题

关于搭建Vue项目的顺序

前言：笔者在搭建Vue项目中遇到了许多问题，当最后解决的时候，仍然对这个过程的来龙去脉极为模糊，在这里从最开始搭建nodejs开始到最后Vue项目搭建完成进行一个一条龙的总结

1.配置Node.js

下载安装node.js.（node.js的版本不宜过高，因为npm和cnpm支持不了过高的nodejs版本，否则可能在装npm会报下面图片的错误，这是最新版14+报的错误，换成12.16.3版以下即可解决）

官网安装地址: https://nodejs.org/en/

安装完毕后如果碰到node.js不是内部或外部命令的情况，说明此时nodejs环境变量并没有配置好要执行以下过程来配置。

配置环境变量过程：
右键点击我的电脑->高级系统设置->高级->环境变量->下面的系统变量栏中找到Path选中，点击编辑，将安装nodejs的路径复制进去，比如我是E:\Program Files\node-v12.16.3-win-x64，然后点击确定即可

配置完成后在命令行输入node -v,如显示版本号，则说明配置成功

2.命令行输入: vue -v

检查是否已经安装脚手架，同时确认是否当前版本是自己满意的，如果不满意，输入以下卸载
npm uninstall vue/cli -g （2+版本的VUE输这个）
或者
npm uninstall @vue/cli -g (3+,4+版本的输这个)

3.安装淘宝镜像cnpm

因为npm是在外网的，不仅安装速度慢，还可能安装失败

而淘宝镜像cnpm将npm上面的模块同步到国内服务器，提高我们安装模块的时间和成功率。安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突。

配置cnpm命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org

检测cnpm是否安装成功:
cnpm -v

4. 全局安装vue脚手架和webpack:

vue脚手架
npm install -g @vue/cli （如果想安装2+版本输入npm install -g vue/cli ）

   也可以安装指定版本的脚手架，命令行执行如下:如果是安装3以下版本的脚手架，命令npm install -g vue-cli@版本号如果是安装3以上版本的脚手架，命令npm install -g @vue/cli@版本号

webpack:
npm install webpack -g

5.在项目根目录下创建项目

在文件夹通过cd +路径进入项目根目录，然后输入以下

第一种（vue2+工程的构建方法）：
vue init webpack 项目名

接下来就会弹出一系列要你填写即选择的选项，这些都是对你项目的描述以及配置的插件
分别是：
Project name：项目名称
Project description：项目描述
Author：作者
Vue build：打包方式（standalone和runtime）,按回车选择默认的就好
Install vue-router?：是否安装路由？肯定是需要用到的，按 y 回车
Use ESLint to lint your code?：是否启用eslint代码检测规则？y/n
Setup unit tests with Karma + Mocha?：是否进行单元测试？y/n
Setup e2e tests with Nightwatch?：是否进行端对端测试？y/n

第二种（vue3+工程的构建方法,用vue-cli来搭建工程）
vue create vue3-app-vue-cli

进入配置连环问答阶段
1.Default(预设)（[vue2],babel,eslint）
2.Default(预设)（[vue3],babel,eslint）
3.Manally select features (自主选择)

如果选择前两项（相当于傻瓜模式），会自动帮你构建完成，如果选择第三项，会进入插件配置界面，选择你需要的插件（choose vue version第一项要选上,用来选择你使用的vue版本）

选择插件时的操作:上下键切换，空格键选中或取消，全部选择完毕之后按回车键提交
自主选择的顺序：
1.选择插件

2.选择版本（前提是第一步选了choose vue version）
分为2.x和3.x(根据自己需要选择)

3.配置文件到一个单独的文件（In dedicated config files,第二个选项为in package.json ）

4.是否保存预设Y/N（就是你是否记录你这次的选择，供下次方便使用）

6.启动项目

cd 项目 (因为你构建完成之后并没有自动进入项目根目录下)
npm run dev （）

本文中的 cnpm镜像描述引用自 “广漂的明哥” 的文章：“脚手架vue-cli和@vue/cli的搭建及区别“

笔者前端菜鸟，如有错漏，敬请指出

关于搭建Vue项目的顺序及遇到的问题相关推荐

Vue-CLI + Webpack 搭建 Vue 项目最全分析
一.vue-cli介绍 vue-cli是一个用于快速搭建vue项目的脚手架. 二.vue-cli安装.更新安装过nodeJs .cnpm 后,全局安装vue-cli(以后其他项目可直接使用): c ...
webpack搭建vue项目（不用脚手架）
webpack搭建vue项目(不用脚手架) npm默认安装的是最新版本,这里讲的是Webpack4用法,如果遇到问题请检查是否是版本问题 webpack5升级了一些东西,例如图片的打包 1.初始化项目 ...
MAC电脑使用vue-cli脚手架搭建vue项目；mac使用脚手架vue-cli搭建vue项目
windows搭建vue项目看这篇
搭建 vue项目（Windows + 命令行 + vsCode）
1.win键 + R ,输入CMD打开命令行. 2.输入node -v 查看node.js是否安装,如果输出版本号,则进行下一步,否则安装node.js. 下载地址:https://nodejs.or ...
搭建vue项目环境以及创建一个简单的vue的demo
一.vue-cli脚手架的搭建步骤 1.首先,确定你的电脑上已经安装了nodejs,可以使用npm包管理器安装环境,如果还没有安装node环境,则需要安装node.js 这个很简单默认点击安装 ...
VSCode搭建Vue项目及服务器部署
一.安装nodeJs 在我之前的博客<idea搭建vue-cli项目>里有详细安装教程,这里进入! 二.在VSCode搭建Vue项目 1.安装全局脚手架 npm i -g @vue/cli ...
Vue入门 - 环境搭建Vue项目创建
Vue起步:从零开始搭建一个完整的Vue项目一.安装Node环境 1.下载Node.js安装包并安装 2.环境变量的配置二.搭建vue项目环境一.安装Node环境 1.下载Node.js安装包并 ...
教你如何搭建vue项目
笔者工作也有一些时间,需要用vue写项目时也总是项目组长已经把项目搭建好了, 偶尔心血来潮想试着自己搭建一个vue项目我们搭建vue项目呢主要是用到了vue-cli来搭建,但是前提是必须要已经安装好 ...
从零开始使用webpack 搭建vue项目
从零开始使用webpack 搭建vue项目 1 创建项目 npm init 生成 package.json 创建 index.html webpack.confug.js project-name|- ...

关于搭建Vue项目的顺序及遇到的问题

关于搭建Vue项目的顺序及遇到的问题相关推荐

最新文章

热门文章