❤ 项目源码 ❤
GitHub地址:https://github.com/Umbrella001/mtapp
一、项目搭建依赖版本一览
项目依赖版本,最好安装这个版本安装,为最稳定
二、项目搭建 – Nuxt部分
nuxt的升级2.0.0使用下面命令安装
[email protected]
$ npm install -g npx
$ npx create-nuxt-app <project-name>
注意如果这里有个报错这样处理就行:
npx create-nuxt-app …时报错 安装 create-nuxt-app@latest 失败
解决:
① 亲测
先安装一下 npm install -g create-nuxt-app
(当前版本为@2.9.2)然后再执行 npx create-nuxt-app <projext name>
然后就行了
打开创建好的项目文件,点开里面的serve文件夹,在 index.js
中修改 const Koa = require('koa')
为import方式引入的话import Koa from 'koa'
会出现报错
解释:
首先构建nuxt有两种方式,一种是模版的方式进行创建,第二种就是现在这种通过[email protected]升级的脚手架构建方式进行构建nuxt文件,两种的区别:前者是通过babel进行处理后,所以里面是可以使用import进行导入内容的
后者是通过 npm run dev
方式启动项目,其中dev中的命令是这样的 "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server"
,他是通过node进行服务器的启动更新并没有经过babel处理,所以是不支持import
指令的,其中nodemon是监听和热更新的服务端脚本的,那我这个应该就不需要修改,我们应该考虑如何添加babel让它新增对import的识别:
看博客: https://blog.csdn.net/Umbrella_Um/article/details/98802192
进入css使用预编译器sass ,然后安装对应的依赖时在 <style lang='scss'>
会报错,
所以我们要安装一下对应的依赖 sass-loader
和 node-sass
:
npm install sass-loader node-sass
注意如果安装过程中出现这个警告的话,建议安装对应的同级文件,避免使用eslint功能时出现部分失效问题 npm install esling@^3.18.0
提示哪个版本就安装哪个版本(我的提示为[email protected] requires a peer of eslint@^5.0.0):
三、项目搭建 – 数据库MongonDB + Redis
安装辅助工具:
mongodb 4.0.11 地址:https://www.runoob.com/mongodb/mongodb-window-install.html
redis Redis-x64-3.0.504.zip 地址:https://www.runoob.com/redis/redis-install.html
robomongo 2019.4.1 (02-Aug-2019) 地址:https://robomongo.org/
robomongo robo3t-1.3.1-windows-x86_64-7419c406.exe 地址:同上 https://robomongo.org/
配置:
使用ES6的import/export代替require
看博客:https://blog.csdn.net/Umbrella_Um/article/details/98802192
修改build配置(nuxt.config.js
):
/*
** Global CSS
*/
css: [
'element-ui/lib/theme-chalk/reset.css',
'element-ui/lib/theme-chalk/index.css',
'@assets/css/main.css'
],
...
/*
** Build configuration
*/
build: {
transpile: [/^element-ui/],
/*
** You can extend webpack config here
*/
extend (config, ctx) {
if(ctx.isDev && ctx.isClient){
config.module.rules.push({
enforce: 'pre',
test: /\/(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
},
cache: true // 开启缓存机制,增加再编译速度
}
四、学习笔记
① (window)在 bash.bashrc
中末尾添加了 alias vue='winpty vue.cmd'
,这样可以解决git Bash中不能上下选择的,但是如果不是vue的话,就需要通过传统的方法进行选择,一个是通过数字,对于有括号的则需要使用提示中的 空格space选择,a全选,i反选
② require
是ES5导包用的比较不好看也不方便,所以现在多数都是用 import/export
这种格式进行导入导出
类比一下:register
注册别名或者插件名为ES5方式,而 create
则为ES6格式
③ 使用预编译sass时需要导入固定依赖 sass-loader
和 node-sass
,其中使用引入的方式为这种格式@import '...'
④ 使用nuxt框架进行vue的开发时,一开始就是要配置一下improt导包的格式,也就是如何修改 package.json
里面的dev和start,还有如何给babel建立指令集 presets:es2015
❤ 项目源码 ❤
GitHub地址:https://github.com/Umbrella001/mtapp