vue项目搭建的完整过程（vue2）

一、环境要求：node

1、下载链接:https://nodejs.org/en/

2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

3、配置镜像

先查看自己是否配置淘宝镜像，没有的话，先配置一下，一般公司项目的话还要配置一下代理

在终端中执行以下代码，配置淘宝镜像，配置完之后，同样执行npm config list 查看配置是否成功

$ npm config set registry https://registry.npm.taobao.org

但是网上大部分文档都是安装cnpm，淘宝镜像: http://npm.taobao.org/

　　输入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。（后来会具体讲解npm和cnpm区别，以及在cnpm上配置淘宝镜像和npm上配置淘宝镜像有啥区别）

　检查是否安装成功：

二、搭建vue项目环境（vue2）

若搭建vue3项目，参考链接：Vue3 项目创建_陌上花开然不归矣的博客-CSDN博客_安装vue3

1、全局安装vue脚手架

npm i vue-cli -g

若本地已经安装vue3的vue/cli，也可以不用安装vue-cli，可以全局安装： npm i -g @vue/cli-init ，建立一个桥接工具，因为Vue CLI 2 (vue-cli) 被覆盖了，目的是使 vue2.x和vue3 兼容；vue/cli也是可以搭建vue2项目，但是不是配合webpack使用，具体可参考：Vue3 项目创建_陌上花开然不归矣的博客-CSDN博客_安装vue3

2、安装webpack

npm i webpack -g

3、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名

vue init webpack demo(项目名)

说明：

? Project name vue-demo // 项目名
? Project description vue-demo // 项目描述
? Author xiaofeng <XX@qq.com> // Author
? Vue build standalone

❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere（仅运行程序: 比上面那种模式轻大约 6KB min+gzip，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数）
这里选择Runtime + Compiler: recommended for most users；具体可参考对Vue中 runtime-compiler 和 runtime-only 两种模式的理解_学霸的男人的博客-CSDN博客_runtime-only

? Install vue-router? Yes //是否需要安装vue-router 项目中肯定会用到路由，Y回车
? Use ESLint to lint your code? No //是否需要 js 语法检测目前我们不需要所以 n 回车；
? Set up unit tests No // 是否安装单元测试工具目前我们不需要所以 n 回车；
? Setup e2e tests with Nightwatch? No // 是否需要测试工具
? Should we run `npm install` for you after the project has been created? (recommended) npm

// 包管理工具，这里有npm 、yarn 我选择的是npm

5、运行vue项目

npm run dev

补充说明：
如果根据以上方法安装了vue3之后，还想使用 vue init webpack 项目名称，创建vue2.x项目，则需要运行一下 npm i -g @vue/cli-init ，因为Vue CLI 2 (vue-cli) 被覆盖了，而这个代码相当于是一个桥接工具，这个的目的是使 vue2.x和vue3 兼容。

vue项目搭建的完整过程（vue2）相关推荐

用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
Re：从零开始的Vue项目搭建
Re:从零开始的Vue项目搭建初始的终结与结束的开始 Nodejs项目的简单测试从零开始 webpack开发模式 webpack编译打包后记初始的终结与结束的开始最开始接触vue项目搭建是从 ...
node安装与环境搭建 + VUE项目搭建
一.node环境安装 1.node下载 node.js官网地址:Node.js LTS:表示稳定版一般用于生产环境,重点在于稳定,如果你需要稳定性并拥有复杂的生产环境(例如中型或大型企业),建议使 ...
Vue 项目搭建流程和使用大全
Vue 项目搭建流程及项目中遇到的问题项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack ...
vue项目搭建详细教程
1.下载node.js 下载地址:Download | Node.js 直接下一步下一步即可下载完成下载完成后,按住win+R,输入cmd回车查看node版本:node -v 查看npm 版本:n ...
vue项目搭建和配置
第一步:创建项目 vue create bigscreen 第二步:进行项目的的配置,在vue.config.js配置文件中配置 module.exports = {outputDir: proces ...
vue项目搭建以及环境配置
一.环境要求:node 1. 下载链接:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功(node-v) 3.配置镜像 : npm i ...
Vue项目搭建手把手教学
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
vue项目搭建，启动
打开cmd命令框: 1.安装node.js, 检测版本node -v, 检测包管理工具npm -v 2. 安装webpack,打开命令行工具输入:npm install webpack -g,安装完成 ...

vue项目搭建的完整过程（vue2）

一、环境要求：node

vue项目搭建的完整过程（vue2）相关推荐

最新文章

热门文章