一、项目搭建

1.安装node环境

node下载地址: https://nodejs.org/en/download/
上面那个地址经常出现访问不了的情况，如果你碰到了，请访问这个地址：https://blog.csdn.net/weixin_43935907/article/details/90044553
检查node是否安装成功

//安装成功的信息
PS D:\work\my_test> node -v
v10.15.3
PS D:\work\my_test> npm -v
6.9.0

2.安装npm镜像(提高下载速度)

安装命令

npm install -g cnpm –registry=https://registry.npm.taobao.org
检查安装

PS D:\work\my_test> cnpm -v
cnpm@6.1.0 (C:\Users\Javacfox\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.9.0 (C:\Users\Javacfox\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.15.3 (D:\Program Files\nodejs\node.exe)
npminstall@3.22.1 (C:\Users\Javacfox\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Javacfox\AppData\Roaming\npm
win32 x64 10.0.17134
registry=https://r.npm.taobao.org

3.搭建vue项目环境

安装全局vue-cli

npm install —global vue-cli
进入文件目录,创建一个基于webpack的模板项目

PS C:\Users\Javacfox>D:
PS D:>cd D:\work\net_safe
PS D:\work\my_test>vue init webpack net_safe (初始化项目的命令)

? Project name net_safe （项目名）
? Project description my first vue.js project (项目描述)
? Author javcfox (作者)
? Vue build standalone
? Install vue-router? Yes (是否使用vue的路由)
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm

vue-cli · Generated “net_safe”.

安装成功后会多一个node_modules的文件夹

4.运行vue项目

cd net_safe
npm run dev
//开启成功会出现下面这个
 DONE  Compiled successfully in 2449ms                                                                          09:38:08
 I  Your application is running here: http://localhost:8081

如果你访问http://localhost:8080出现下面的页面，表示你创建成功。

简单的项目目录介绍

build：构建脚本目录

1、build.js ==> 生产环境构建脚本；
2、check-versions.js ==> 检查npm，node.js版本；
3、logo.png ==> vue图标
4、utils.js ==> 构建相关工具方法；
5、vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；
6、webpack.base.conf.js ==> webpack基本配置；
7、webpack.dev.conf.js ==> webpack开发环境配置；
8、webpack.prod.conf.js ==> webpack生产环境配置；
config：项目配置

1、dev.env.js ==> 开发环境变量
2、index.js ==> 项目配置文件
3、prod.env.js ==> 生成环境变量
node_modules：依赖加载模块，相当于java中的maven dependency
src：这里是我们要开发的目录,里面包含了几个目录及文件：

1、assets ==> 资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2、components ==> 组件目录，我们写的组件就放在这个目录里面；
3、router ==> 前端路由，我们需要配置的路由路径写在index.js里面；
4、App.vue ==> 根组件；
5、main.js ==> 入口js文件；
static：静态资源目录，如图片、字体等
index.html：首页入口文件，可以添加一些 meta 信息等(单页)
package.json：npm包配置文件，定义了项目开发和生产环境下的npm脚本，依赖包等信息
README.md：markdown 格式，项目的说明文档和使用手册
.babelrc、.editorconfig等文件（有好几个不一一列举了）：这些是一些配置文件，包括语法配置，git配置等

问题：怎么引入插件jQ？

项目中引入jQ的几种方法，请访问这个：https://blog.csdn.net/yiifaa/article/details/51916560 （里面介绍了四种方法，其中我觉得第四种比较实用，需要改动的地方比较少），说到这个，我先描述一下我引入ztree之后出现的问题。

jquery.ztree.core.js?6a36:1821 Uncaught ReferenceError: jQuery is not defined

at eval (jquery.ztree.core.js?6a36:1821)
at Object../node_modules/ztree/js/jquery.ztree.core.js (app.js:2269)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/components/HelloWorld.vue:1)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/HelloWorld.vue (app.js:965)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (HelloWorld.vue?5a7b:1)
at Object../src/components/HelloWorld.vue (app.js:2292)

根本原因：ztree内部依赖jQ，我只引入了里面的几个核心js和cs文件，所以没有jQ的，无法识别。然后我引入的jq没有被ztree引入，所以报错。
解决方法

1、在assert路径下创建一个jquery-vendor.js文件
2、在文件里面写入如下代码
import $ from ‘jquery’
window.$ = $
window.jQuery = $
export default $
3、在需要使用的地方引入
import $ from ‘../assets/jquery-vendor.js’
然后问题完美解决了!