Nodejs使用webpack或vue-cli搭建vue项目

---

一、下载后基本配置

1、安装cnpm以及全局

在 nodejs 安装目录下，创建 ”node_global” 和 ”node_cache” 两个文件夹

打开cmd输入命令安装

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

安装npm淘宝镜像 cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

配置环境变量

cnpm 安装webpack

cnpm install webpack -g

安装vue脚手架

cnpm install -g @vue/cli

二、webpack工程

windows用户的话，直接进入该文件夹之后点击上方，点击地址栏输入cmd然后回车，就直接用cmd进去改目录下。

vue init webpack  wnm_project（这里wnm_project是项目名字）

? Project name wnm_project-----------项目名字叫wnm_project
? Project description A Vue.js project   -----这是一个vue项目
? Author licy                --------------作者叫licy
? Vue build standalone     
? Install vue-router? Yes    ------------是否安装路由（这里不安装的话也可以进去后手动安装，一般默认安装y）
? Use ESLint to lint your code? No  -------是否使用ESLint 模式（这是严格模式会比较麻烦，新手建议不用，毕竟影响不大）
? Set up unit tests Yes    -------- 是否设置单元测试，看需求，一般使用
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes     ----nightwatch实现vue应用e2e测试

直接访问 http://localhost:8080

三、vue-cli工程

 vue create asz_project（这里asz_project是项目名字）

本次我们选择：Babel，Router，Vuex，CSS Pre-processors。

这一步提示我们是否使用历史路由器，输入 n ，回车

这一步提示我们在项目里面需要支持何种动态样式语言，我们选择第一个（上下键移动键），回车

这一步提示我们选择配置文件的位置，因为每个插件都有自己单独的配置文件，我们选择第一个，回车
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。

选择Eslint代码验证规则
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则 这些规则在这里添加链接描述
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb的规则在这里添加链接描述
ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard第三方的配置 Standard 的规则在这里 添加链接描述
ESLint + Prettier 使用 ESLint 官网推荐的规则 +

选择什么时候进行代码规则检测
( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

选择如何存放配置
Indedicated config files // 独立文件放置
Inpackage.json // 放package.json里

如果是选择 独立文件放置，项目会有单独如下图所示的几件文件。

是否保存当前配置

四、解读

先从进入项目根目录说起，也就是第一眼看到的文件(版本不同，可能稍有不同)

1、项目根目录中的文件

• README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。
• package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。
• package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。
• gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。
• node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。
• public ：公共文件，里边有公用模板和图标等一些东西。
• src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

2、public文件夹

这个文件都是一些项目使用的公共文件，也就是说都是共用的，我们就具体看一下有那些文件吧。

favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示。
index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果。
mainifest.json：移动端配置文件。

3、src文件夹

• assets:放置静态资源，包括公共的css 文件、js 文件、iconfont字体文件、img图片文件以及其他资源类文件。之所以强调是公共的css 文件，是因为要在组件的 css 标签里加入‘scoped‘标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式;
• components:放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作;
• http:放置与后台api相关的文件。这里面有 axios 库的实例配置文件、使用配置的 axios实例接入 api获取数据的函数的集合的文件;
• mixins:放置混合选项的文件。具体来说，相当于是公用函数的集合，在组件中引用时，可以作用于组件而不必书写重复的方法;
• pages:放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面;
• router: 放置路由设置文件,指定路由对应的组件;
• store:放置 vuex需要的状态关联文件，设置公共的state、mutations 等;
• App.vue:入口组件, pages里的组件会被插入此组件中，此组件再插入index.html 文件里，形成单页面应用;
• main.js:入口js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。

五、总结

vue-cli 内部封装了 webpack,对外仅仅提供几个依赖。而且做了很多适合 vue 项目的优化，同时你可以用 vue.config.js 来管理项目，package.json 非常清爽。
webpack 更符合针有特定需求，毕竟是原生。不过管理起来也更加复杂。不过社区有升级，可以第一时间获取升级优势。前一种只能等待 vue-cli 项目升级。
一般来说，vue-cli 够用了，但是 vue-cli 能实现的，webpack 一定能实现，反之，不一定。

六、遇到问题

1、安装vue出现报错

解决办法

2、项目实操