Vue相关问题总结

╰+攻爆jí腚メ 2024-04-17 06:08 70阅读 0赞

近期公司选用Vue实现了一个CMS的后台管理系统，从零基础搭建到项目完成，遇到了不少问题，同时也成长了很多，下面是自己在平时学习使用过程中总结的一些问题。

vue不仅仅是一个模板引擎，它可以构建数据驱动的web界面，而它的一个框架NUXT主要是做服务器渲染的，便于SEO优化。

vue所适用的场景：

1、存在复杂表单的应用；

2、不需要考虑seo的单页应用；

3、内部系统；

4、不需要支持低版本IE浏览器的应用；

5、其他带壳的web应用；

**一、安装**

1.下载安装node,然后打开cmd，输入npm -v测试，若npm不被写入则更改环境变量path（cmd要调用的path）路径

2.安装Git(GitHub)，node,修改path路径

3.安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org

验证通过：cnpm -v

4..安装vue指令(全局安装vue-cli)：cnpm install -g vue-cli(npm install vue-cli-g)

验证通过：vue

5.创建一个基于“webpack”模板的新项目(初始化项目)：vue init webpack my-project

6.进入package文件：vi package.json

7.安装项目依赖：

cd my-project

npm install

npm run dev（在localhost启动测试服务器）

npm run build（生成上线目录（部署））

8.打包和运行

npm run build npm start

9.NUXT打包：

npm run build

npm run generate

nuxt build：使用webpack构建应用程序并缩小JS和CSS（用于生产）。 nuxt generate：构建应用程序并生成每个路径作为HTML文件（用于静态托管）。

**二、常用插件和方法**

1.vue-validator——验证 vue-devtools——vue Chrome开发者工具 vue-router——路由

2.钩子函数

3.安装 vue 路由模块vue-router

cnpm install vue-router --save

或添加 "vue-router":"^0.7.13"=》npm install

4.网络请求模块vue-resource（给页面加动态数据对应的库），vue-resource——ajax来加载资源和发送请求的XMLHttpRequest

cnpm install vue-resource --save

5.安装axios

$ npm install axios

执行npm ls | grep axios，看看依赖有没有安装上

6.安装jquery

npm install jquery cropper --save

在build/webpack.base.conf文件中添加:

'jquery': path.resolve(\_\_dirname, '../node\_modules/jquery/src/jquery'),

'directives': path.resolve(\_\_dirname, '../src/directives')

7.安装stylus-loader和stylus

第一步:把stylus-loader 改成 "^2.4.0" 比如: "stylus-loader": "^2.4.0", 如果没有这条记录就自行添加一条

第二步:需要多添加一条插件 "stylus": "0.52.4" 在package.json里面增加就好 然后执行安装命令 即可解决

8.'components':path.resolve(\_dirname,'../src/components') 路径配置

9.mixin是css预处理器提供的一个特殊的方法，它可以通过定义一个函数

10.ifconfig查看电脑ip 利用电脑ip地址替换http://localhost在手机端访问=>将地址到草料二维码网站生成二维码

11.JS调取的接口仅限于浏览器，nodeJs操作整个系统的接口，如可以写入读取文件，使用nodeJs配合前端开发，比如包管理工具（包管理器npm）下载项目所依赖的库或框架,使用node启动本地

测试server，是js的运行环境

12.cd ../返回上一级菜单

13.vue init webpack

14.[npm][] 会在项目的 package.json 文件中寻找 scripts 区域，其中包括npm test和npm start等命令。

其实npm test和npm start是npm run test和npm run start的简写。事实上，你可以使用npm run来运行scripts里的任何条目。

使用npm run的方便之处在于，npm会自动把node\_modules/.bin加入$PATH，这样你可以直接运行依赖程序和开发依赖程序，不用全局安装了。只要npm上的包提供命令行接口，你就可以直接使用它们，方便吧？当然，你总是可以自己写一个简单的小程序。

15.vue-cli——脚手架工具 vue -v查看vue是否安装成功 vue --help可看到有哪些命令可以使用 vue-touch——vuejs用于移动端开发，基于Hammer.js

16.前端新功能CSS网格单元布局,CSS-in-JS

静态网站生成（2017年静态网站生成也开始热起来。像[Gatsby][]这样的网站可以使用React等现代工具来构建静态网页。不是所有的网站都需要复杂的网页技术。静态网站生成会给您更加极致的网页访问速度。如果您在寻找合适的例子，React官方文档就是使用Gatsby生成的。）

*  Flow和TypeScript使得JavaScript更加地结构化；
 *  容器技术会影响到前端架构的设计；
 *  移动端微信平台开发的实时技术动态

17.vuex安装cnpm install vuex --save

18.vue-cli 本地开发mock数据使用方法：json-server模拟前后端交互

cnpm install -g json-server

19.cmd退出：ctrl+c

20.模拟测试服务器方法(模拟后台数据)：

一、（1）旧版：安装json-server(问题？）

配置：/build/dev-server.js

var jsonServer=require('json-server')

var jsonServer =new jsonServer()

var jsonServer=require('json-server')

var apiServer = jsonServer.create()

var apiRouter = jsonServer.router('db.json')

var middlewares = jsonServer.defaults()

apiServer.use(middlewares)

apiServer.use(apiRouter)

apiServer.listen(port +1, () => \{

console.log('JSON Server is running')

\})

启动json-server 并告诉json-server监视db.json

json-server --watch db.json

可以指定端口 这样我们就可以监听多个json文件:

json-server --watch -port 8888 db.json

可以看到在Routes选项出 列举了db.json字典的所有keys点击posts

[http://localhost:3000][http_localhost_3000]/posts

怎样做服务器端代理

二、新版json-server模拟数据：

（1）使用json-server这个工具，可以虚构出后端接口对应的数据，然后在项目里发送特定的请求，就可以发请求拿到模拟的数据，首先npm安装

npm install json-server --save

（2）然后在build/webpack.dev.conf.js中进行配置

1.  //这里是json-server配置信息  
2.  // json-server.js  
3.  const jsonServer = require('json-server')  
4.  const apiServer = jsonServer.create()  
5.  const apiRouter = jsonServer.router('db.json') //数据关联server，db.json与index.html同级  
6.  const middlewares = jsonServer.defaults()  
7.    
8.  apiServer.use(middlewares)  
9.  apiServer.use('/api',apiRouter)  
10. apiServer.listen(3000, () => \{                 //监听端口  
11.   console.log('JSON Server is running')  
12. \})

（3） nuxtjs

代码的服务端接口是8080，json-server的服务端端口是3000，由于浏览器的同源策略问题，这样请求会存在一个跨域问题，所以这里要做一个服务端代理的配置，配置build/index.js中的proxyTable:

1.  host: 'localhost', // can be overwritten by process.env.HOST  
2.  port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined  
3.  autoOpenBrowser: false,  
4.  errorOverlay: true,  
5.  notifyOnErrors: true,  
6.  poll: false, // https://webpack.js.org/configuration/dev-server/\#devserver-watchoptions-  
7.  proxyTable:\{  
8.    '/api/':'http://localhost:3000/'  
9.  \},

21.

![20190826154928529.png][]

22.轮播图实现-第三方组件实现：

查找vue组件方式：vue.js/awesome-vue 包括路由，UI组件 =》[shhdgit][]/[vue-easy-slider][]

23.弹窗组件：

vue-bulma/slider

24.vue验证插件（vue-validity)

25.awesome.vue时间插件（github.com)

=>datepic/calendar

![20190826155024358.png][]

![2019082615503755.png][]

26.NUXT框架

[https://www.cnblogs.com/buzhiqianduan/p/7922525.html][https_www.cnblogs.com_buzhiqianduan_p_7922525.html]

[http://blog.csdn.net/Codec007/article/details/78241004][http_blog.csdn.net_Codec007_article_details_78241004]

27.查询端口

打开cmd命令 输入如下----

在windows控制台窗口下执行：

查询80xx端口

netstat -nao | findstr “80xx”

TCP 127.0.0.1:9010 0.0.0.0:0 LISTENING 3017

你看到是PID为3017的进程占用了8080端口，如果进一步你想知道它的进程名称，

你可以使用如下命令：tasklist | findstr “3017” 如果你想杀死这个进程，你当然可以用前面描述的那种方法，

在任务管理器里把它KILL了，但如果你喜欢高效一点，那么用taskkill命令就可以了。taskkill /pid 3017 /F那么这个进程就灰灰湮灭了

28.scss安装：

cnpm install node-sass

cnpm install sass-loader

cnpm install vue-style-loader

输出方式：sass --watch test.scss:test.css --style compact

29.--spa在SPA模式下启动

**三、所遇到的坑总结**

1.解决vue2无法读取router1中components的问题：npm install vue-router@next

2.选用elementUI等框架来实现，项目整体效果会好很多，而且会节省不少工作量

3.采用cookie，localStorage等缓存存放数据，解决页面刷新，vuex中数据清空的问题

4.使用ES6的方法Promise解决组件中调用vuex中的接口，无法获取接口返回的数据的问题，附图说明：

vuex中的action方法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70][]

组件中的调用：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 1][]

[npm]: https://npmjs.org/
[Gatsby]: https://www.gatsbyjs.org/
[http_localhost_3000]: https://link.jianshu.com/?t=http://localhost:3000
[20190826154928529.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/f437c9dee9744179b5a39220155fca13.png
[shhdgit]: https://github.com/shhdgit
[vue-easy-slider]: https://github.com/shhdgit/vue-easy-slider
[20190826155024358.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/527bbc7be9d242188976a091bbb2e540.png
[2019082615503755.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/27bc398dbbfc4ad69915b6ef444fe687.png
[https_www.cnblogs.com_buzhiqianduan_p_7922525.html]: https://www.cnblogs.com/buzhiqianduan/p/7922525.html
[http_blog.csdn.net_Codec007_article_details_78241004]: http://blog.csdn.net/Codec007/article/details/78241004
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/4126e985f36f41fcb4003f7065637349.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NDU1MTc_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/f44521cc404f414a97f1be868c2c3c05.png