vue项目的搭建和常见问题的解决 web

一、项目搭建 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) npmvue-cli · Generated "net_safe".

安装成功后会多一个node_modules的文件夹
4.运行vue项目

cd net_safe npm run dev//开启成功会出现下面这个 DONECompiled successfully in 2449ms09:38:08 IYour application is running here: http://localhost:8081

文章图片

如果你访问http://localhost:8080出现下面的页面，表示你创建成功。
简单的项目目录介绍 【vue项目的搭建和常见问题的解决】

文章图片

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