创建Vue 、 webpack 项目（Vue-CLI2）

菜鸟今天正在看网上的vue教学视频，然后发现很多咋和我写的不太一样，菜鸟本来是想改好的，结果发现，学校就是垃圾，教的居然是2.9的版本的，现在都4了，心累，今后菜鸟重新写一篇吧，这篇文章看还是有点小用，但是用处不大，/(ㄒoㄒ)/~~

一、创建文件夹

创建一个空文件夹（英文路径），作为项目目录

二、查看node

Vs code打开新建目录，然后点击 “ 终端 ”—> “ 新终端 ”，检查是否安装了node ( 顺便也可以看看npm的版本 )

node -v
npm -v

注意：

其实 npm 是 nodejs 的包管理器（node package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦，于是就出现了包管理器npm。


大家把自己写好的源码上传到npm官网上，如果要用某个或某些，直接通过npm安装就可以了，不用管那个源码在哪里。


并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！

如果想升级到最新版本，就执行

npm install -g npm

三、修改下载地址

如果直接从npm默认指定的地址安装的话，速度很慢，可以从淘宝的npm镜像cnpm中下载，eg:

也可以不用安装cnpm，只需要将npm的下载路径改为淘宝cnpm的下载路径即可：

查看地址：

npm config get registry 

修改地址：

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

这些都是一次修改，终生有效

npm安装模块

【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；
【npm install -g xxx】利用npm安装全局模块xxx；

本地安装时将模块写入package.json中：

【npm install xxx】安装但不写入package.json；
【npm install xxx –save】 安装并写入package.json的”dependencies”中；
【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中。

npm 删除模块

【npm uninstall xxx】删除xxx模块；
【npm uninstall -g xxx】删除全局模块xxx；

注意：

删除后（通过看 package.json 文件里的 dependencies/devDependencies 可以看出确实删除了），可能文件夹或者文件不会消失，但里面的内容确实消失了，记得自己删除掉剩余的。

四、初始化项目为node

因为npm是一个node.js中的一个工具，项目必须是node.js的项目

初始化项目：

npm init / npm init -y

后一个就是省略了敲回车的功夫，但是都是默认的配置或者名称！

五、安装vue脚手架

vue-cli是vue的脚手架，帮助我们迅速构建vue项目

1、安装vue-cli

全局安装vue-cli

npm install -g vue-cli

注意：

这个是安装的是vue 2.9.6版本！

2021/2/28日改

npm install -g @vue/cli

注意：

必须是全局安装，安装后通过 vue --version 查看版本！

报错：npm ERR! code EEXIST

如果你先前安装过vue，那这时候会报错：

解决办法就是，去C:\Users\asus\AppData\Roaming\npm\node_modules删除先前安装的 vue文件夹 ，然后把C:\Users\asus\AppData\Roaming\npm里面的有关vue的也全部删除，eg:

如果还是不行，建议把C:\Users\asus\AppData\Roaming里面的 npm-cache 也删除了

2、初始化创建项目

vue init <template-name> <project-name>

template-name为模板的名称：

官方模板：webpack ，webpack-simple， browserify，browserify-simple，pwa，simple

在工作空间的目录下，使用vue init新建一个基于webpack的项目toutiao

出现以上错误，原因是终端不是在管理员下运行，脚本没有授权，不被执行，解决方式如下：

运行powershell（管理员身份）
输入 set-ExecutionPolicy RemoteSigned

注意：

输入A，选择全是

3、项目结构

Build文件夹包含webpack的配置文件

Config文件夹包含项目配置文件

Src文件夹是我们开发时用到的文件：

• 其中asset文件夹放置静态资源（图片），
• components文件夹放置vue组件，
• router文件夹中index.js文件定义了路由，
• index.html是项目的入口界面（其中显示的是App.vue，然后在 App.vue里面又可以加载components文件里的组件，所以可以说如果不改页面结构，App.vue可以当作入口界面），
• main.js项目入口配置文件

4、修改package.json

–hot    热启动（每当修改js，进行编译，页面自动刷新，显示更改之后的结果）
–port 3000    所占的端口号
webpack-dev-server --open chrome    通过webpack-dev-server运行程序，同时打开chrome浏览器

5、npm run dev运行程序