近期公司选用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生成的。)
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/posts
怎样做服务器端代理
二、新版json-server模拟数据:
(1)使用json-server这个工具,可以虚构出后端接口对应的数据,然后在项目里发送特定的请求,就可以发请求拿到模拟的数据,首先npm安装
npm install json-server --save
(2)然后在build/webpack.dev.conf.js中进行配置
(3) nuxtjs
代码的服务端接口是8080,json-server的服务端端口是3000,由于浏览器的同源策略问题,这样请求会存在一个跨域问题,所以这里要做一个服务端代理的配置,配置build/index.js中的proxyTable:
21.
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
26.NUXT框架
https://www.cnblogs.com/buzhiqianduan/p/7922525.html
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方法:
组件中的调用: