vue项目的搭建和常见问题的解决_vue-okr-tree 报错-CSDN博客

本文链接：https://blog.csdn.net/weixin_43935907/article/details/92769570

一、项目搭建

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出现下面的页面，表示你创建成功。

简单的项目目录介绍

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'
然后问题完美解决了!