关键词：

1.安装npm

从node.js官网下载并安装node

node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。

npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。

 

设置全集和缓存路径：

npm config set prefix "D:Program Files odejs ode_global"
npm config set cache "D:Program Files odejs ode_cache"

npm config set registry=http://registry.npm.taobao.org 配置镜像站

设置vue全局命令路径（D:Program Files odejs ode_global）到环境变量

 2.安装cnpm

由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.

在命令行中输入  npm install -g cnpm ，然后等待，没报错表示安装成功。

3.安装vue-cli 

在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

是否安装成功：vue -V

webpack的版本查询：webpack -v

 

4.测试项目

通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

1.cmd打开自己的项目工作空间（E:codevue），然后敲入命令：

vue init webpack testvue（其中testvue为 项目名称）

2.然后终端会出现下图“一问一答”模式，如图：

 

这里有几个需要说明一下，没说明的直接回车选择默认就好，对项目没多大影响，很傻瓜式：

“Project name”：这个是项目名称，默认是输入时的那个名称，想改的话直接输入修改，也可以直接回车

“Install vue-router”:是否需要vue-router，这里默认选择使用，这样生成好的项目就会有相关的路由配置文件

“Use ESLint to lint your code”:是否使用ESLint，刚才说了我们这个项目需要使用所以也是直接回车，默认使用，这样会生成相关的ESLint配置

“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试，所以这里选择的是”N”，而不是直接回车哦

“Setup e2e tests with Nightwatch”：是否安装e2e测试，这里我也同样选择的是“N”

这几个配置选择yes 或者 no 对于我们项目最大的影响就是，如果选择了yes 则生成的项目会自动有相关的配置，有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes，要么下一步要下很多没有用的loader

3.目录结构说明

1. build 文件夹：

如上图，这个文件夹主要是进行webpack的一些配置，就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件，分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容，一些简单的配置都已经有了，包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的，比如生成环境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的删除，其实都是和业务相关了，其他的都可以不需要动。

2. config 文件夹：

用来定义开发环境和生产环境中所需要的参数(配置路径、端口号等一些信息)

3. src文件夹：

这个文件夹是整个项目最主要以及使用频率最高的文件夹。

“assets”: 共用的样式、图片

“components”: 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件

“router”: 设置路由

“App.vue”: vue文件入口界面

“main.js：对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置

4.static 文件夹：

存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用

5.package.json:

这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是
npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

4.下载依赖包

上一步我们已经生成好项目，现在打开之前说过的package.json 文件，找到devDependencies 和 dependencies ，在这里面可以删掉我们不需要的.

cd到项目里面运行,下载安装

cnpm install   /  npm install

 (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)
这个过程会生成一个node_modules 文件夹，这一个过程可能会有一点耗时间，但是也是傻瓜式，一个个下载，下载好之后输入npm run dev 。如果有哪些缺漏的都会提示再补下载就好了

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目

5.运行项目

当所有依赖包都下载好之后，输入命令：

npm run dev 

运行就可以看到一个自带的默认页面打开

 

vue-cli3.0.3，配置基本环境及打包(代码片段)

从新建项目到设置打包环境1.vuecreatevue-cli-env2.新建vue.config.js文件，设置baseUrl:‘./‘3.新建各个环境的文件，例如：.env.development.env.test.env.production4.在package.json中设置打包命令，例如：build:developmentbuild:testbuild:production，在执行命... 查看详情

webpack5项目搭建vue-cli(合并配置)(代码片段)

对于开发环境的配置和生产环境的配置，有大部分代码配置是重复的，因此我们希望将配置合并减少代码体积。对于Vue-Cli的合并配置，我们使用webpack.prod.js进行改造。step1–判断环境类型对于什么时候是开发环境࿰... 查看详情

vue-cli如何添加多种环境变量(代码片段)

vue-cli如何添加多种环境变量目前webpack(vue-cli)打包有两种变量，development,productor,如何添加一个test的测试环境呢vue-cli3.0vue-cli3.0简化了业务需求，没有那么多额外的配置，目前想改变环境变量，官方默认如此,网友1官方默认两种类... 查看详情

vue-cli项目结构(代码片段)

Vue-cli项目结构vue-cli为我们搭建开发所需要的环境目录结构及主要功能|--build//项目构建(webpack)相关代码||--build.js//生产环境构建代码||--check-version.js//检查node、npm等版本||--dev-client.js//热重载相关||--dev-server.js//构建本地服务器||--ut... 查看详情

webpack5项目搭建vue-cli(生产环境)(代码片段)

我们这里的webpack.prod.js采用复用react-cli的开发模式的配置进行改造。step1–添加vue-loader配置1、rule.loadertest:/\\.vue$/,loader:'vue-loader',,2、插件配置constVueLoaderPlugin=require('vue-loader')constDefinePlugin 查看详情

vue-cli初始----安装运行vue项目(代码片段)

文章目录安装Node.js环境1、官网下载2、配置环境变量3、Node.js配置安装VueCli0、安装配置好node.js环境1、安装vuecli2、通过vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载... 查看详情

vue-cli初始----安装运行vue项目(代码片段)

文章目录安装Node.js环境1、官网下载2、配置环境变量3、Node.js配置安装VueCli0、安装配置好node.js环境1、安装vuecli2、通过vuecli创建项目3、创建一个vue项目4、项目创建成功5、运行前端项目安装Node.js环境1、官网下载去node.js官网下载... 查看详情

vue-cli环境配置(代码片段)

...镜像站设置vue全局命令路径（D:ProgramFilesodejsode_global）到环境变量 2.安装cnpm由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.在命令行中输入  n... 查看详情

vue-cli根据不同的命令自动切换不同环境地址(代码片段)

...我们再使用vue脚手架开发项目时，不可避免的涉及到多个环境来回切换接口调用地址的问题，在开发环境中可能会通过ip来访问后台接口，但是当项目上线后就要把对用的接口地址换成生产环境的地址，肯定不能再用ip来调用，... 查看详情

electron-vue环境配置(代码片段)

 VueCLI安装参考：https://cli.vuejs.org/npminstall-g@vue/cli#ORyarnglobaladd@vue/cli参考：https://cli.vuejs.org/zh/guide/installation.html旧版本处理：VueCLI的包名称由vue-cli改成了@vue/cli。如果你已经全局安装了旧版本的vue-cli(1.x或2.x) 查看详情

vue-cli4.5搭建（vue3+typescript+antdesign2）环境及vscode代码自动格式化配置(代码片段)

一开始是准备用vite的，但总是出不来，案例也比较少，感觉还不成熟，暂时放弃了。1、升级vue-cli为最新4.5cnpminstall-gvue@vue/cli2、创建项目vuecreatedemo1选择Manuallyselectfeatures  选中这些组件  选择3.x选择：ESLint+Prettier&n... 查看详情

vue-cli3跨域配置(代码片段)

...由于baseUrl也是关联的部署目录，我们需求的仅仅是开发环境的变量，所以尽可能的我们不动baseUrl这个变量以免部署的时候出现问题。所以这里配置稍作修改。需求上是我们只需要在开发环境配置跨域代理，所以我们可以在开发... 查看详情

vue-cli跨域proxytable中的pathrewrite配置(代码片段)

module.exports=dev://PathsassetsSubDirectory:‘static‘,assetsPublicPath:‘/‘,proxyTable://只能在开发环境下进行跨域，上线要进行反向代理nginx设置‘/appstore‘:target:‘ip:port‘,//后端接口地址changeOrigin:true,//是否允许跨越pathRewrite:‘^/ 查看详情

vue-cli根据不同的环境打包(代码片段)

根据项目需要，通过vue-cli中的npmrunbuild打包到不同的环境，例如测试环境，预发布环境，线上环境，根据process.env分别进行接口的调用vue-cli中build中build.jsrequire(‘./check-versions‘)()//process.env.NODE_ENV=‘production‘varora=require(‘ora‘)v... 查看详情

基于m1(arm)架构的vue2环境(代码片段)

文章目录1.环境说明2.安装步骤踩坑：使用yarn全局安装vue-cli成功,但是vue命令无法识别，需要手动配置环境变量。npm安装vue-cli失败，网络连接不稳定导致安装失败，采用配置cnpm全局安装vue-cli成功，无需再配置... 查看详情

vue-cli3脚手架创建项目(代码片段)

...微总结一下前端开发（使用vue-cli）搭建前端项目环境，首先是项目环境配置：首先创建一个项目的命令是vuecreate<项目名>//项目名字不支持驼峰命名接下来是选择是否使用默认配置，或者自己选择配置࿱... 查看详情

vue-cli环境搭建(代码片段)

1、设置npm国内镜像npmconfigsetregistry=https://registry.npm.taobao.org2、安装vue-clinpminstall--global[email protected]2.9.33、使用vue-clivueinitwebpackvue-study4、启动项目服务cdvue-studynpmrundev  查看详情

vue-cli3的本地代理配置(代码片段)

...以开发都不是在同一台主机上的，所以当我们需要再开发环境中请求API，需要服务器的API代理到本地(原理是什么呢？是如何代理过来的呢？有待下一篇文章进行探讨，暂时不去理会了)。这个问题实际上vue-cli3已经有解决方案了... 查看详情