VUE全栈开发学习笔记 01.软件安装一览
1.安装Node.js
选择稳定版：Recommentded For Most Users
安装好后就可以使用npm命令了，可以查看一下npm版本：
npm –version
========================================
如果安装过Node.js需要更新到最新的稳定版本:
清除缓存： npm cache clean -f
安装模块： npm install -g n
升级到最新稳定版：n stable
如果是mac 在命令前面加sudo：sudon stable
2.安装vue/cli
使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
在公司速度没问题，不需要使用淘宝镜像，在家速度不行，需要使用
安装：
安装Vue cli3：npm install -g @vue/cli
兼容Vue cli2：npm install -g @vue/cli-init
查看版本：vue --version
创建前台工程：
cdworkspace
vue-cli2：
创建工程：vue init webpack lanzy-frontend
启动工程：npm run dev
vue-cli3
创建工程：vue create lanzy- frontend
启动工程：npm run serve
这里使用cli2来创建工程，所有选项都选择默认，选项提示插件后续都可以添加删除
如果使用Git取得已有项目的话，参考后续Git常用命令章节
3.安装vue前台开发所需插件
如果cli创建工程的时候已经选择安装了的话，就不用再安装了。
需要安装的话，进入工程目录，执行以下命令进行安装
3.1. router： npm install --save vue-router
3.2. eslint： 最好cli安装，如何配置没有研究
3.3. vuex： npm install --save vuex
3.4. elementui: npm install --save element-ui
我测试的时候因为版本问题cli3搭建的项目是无法使用elementui的
官网：https://element.eleme.cn/
3.5. axios： npm install axios –save
4.安装mongodb
官网：https://www.mongodb.com/try/download/community
配置系统环境变量：
我的电脑-》右键选属性-》高级系统设置-》环境变量-》系统变量-》path-》编辑-》新建
Path：C:\Program Files\MongoDB\Server\4.4\bin\
创建数据库目录：C:\mongodb\data
运行服务器：mongod --dbpath C:\mongodb\data
连结服务器：mongo
连结测试：localhost:27017
5.安装express
安装:
npm install express -g
npm install express-generator -g
查看版本：express -v
查看帮助：express -h
创建后台工程：
cdworkspace
创建工程：express -e lanzy-backend
进入工程：cd lanzy-backend
安装依赖：npm install
启动工程：npm start
连结测试：http://localhost:3000/
停止工程：Ctrl+C
6.安装后台开发所需插件
进入后台工程目录lanzy-backend安装插件
6.1. mongodb：npm install --save mongodb
7.安装Vscode
官网：https://code.visualstudio.com/
8.安装Git
Vscode应该是集成了Git的，在左边导航条上能找到，我的不知道为什么没有集成，需要自己配置
官网：https://git-scm.com/download
配置系统环境变量：
我的电脑-》右键选属性-》高级系统设置-》环境变量-》系统变量-》path-》编辑-》新建
Path：C:/program Files/Git/bin/
配置Vscode：在vscode中打开用户设置：文件>首选项>设置，修改如下配置
{
"files.autoSave":"off",
"git.path":"C:/programFiles/Git/bin/git.exe"
}
9.Vscode 一键模板
9.1.安装Vetur
安装Verur
9.2.创建模板
Code->Preferences->UserSnippets
搜索vue，选择vue.json
贴入模板代码：
{
"Printto console": {
"prefix":"vue",
"body":[
"",
"
\n",
" ",
"\n",
"",
"exportdefault {",
" data() {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
"}",
"\n",
"",
"",
"$2"
],
"description":"Log output to console"
}
}
新建*.vue文件，敲入vue回车，会自动写入模板代码
10.快捷键清空Terminal
File->Preferences->KeyboardShortcuts
输入框输入workbench.action.terminal.clear
弹出框内输入快捷键，回车保存
网友评论