1)安装nodejs
地址:https://nodejs.org/en/ ,选择一个版本(最新版本支持性不太稳定,后面安装启动的时候如何报错了,很可能就是版本问题),选好安装路径一路next;确认是否安装成功:cmd执行node -v查看版本信息(此时在外部比如说vscode上可能还无法使用node需要重启一下vscode);
2)vue-cli脚手架安装
需要用淘宝镜像的话先用npm安装淘宝镜像(cnpm),命令:npm install -g cnpm –registry=https://registry.npm.taobao.org ,然后执行(cnpm)npm install -g vue-cli,查看是否安装成功:vue -V(这个V一定要大写);
3)创建vue项目
执行vue init webpack projectName,注意安装目录,自行切换目录;(应该是不需要单独安装webpack,如果需要先安装,命令:(cnpm)npm install -g webpack,-g表示全局,如果不需要全局就去掉-g;如果vue不是可用命令在前面加npx-npx vue init …)
4)创建vue 项目时会cmd窗口会出现一些配置信息,配置如下:
此处并不难理解,Project name起的时候不要有大写字母,大写了会提示你的;Use ESLint to lint your code,可不可以yes,具体是什么可以,出错了怎么办可以参考https://www.jianshu.com/p/8160a97d21c1这个链接
5)安装依赖包
切换到项目目录:cd projectName 安装(cnpm)npm install,此时你会发现已经创建的项目结构里面会多出一个node_modules的文件夹;
6)运行项目
执行(cnpm)npm run dev,打开浏览器输入localhost:8080,出现vue界面则表示安装成功。这里的端口号可自行修改,修改文件config/index.js下的port参数,重启一下(cnpm run dev)浏览器输入新端口地址即可。(如果不想用localhost想用ip地址则修改index.js下的host参数为0.0.0.0,表示通过本机的一切IP地址)
7、说下页面的入口文件,
前端页面都在src下以.vue为文件类型开发项目
至此vue初步搭建就已经完成了,但项目中要用到的插件、配置、实现代码以及后期的打包还需要很长的过程,加油
下面记录一下个人项目中需要安装的vue插件:
axios:npm install --save axios//请求接口
less-loader: npm install less less-loader --save//支持css预处理less语法
vuex: npm install --save vuex//vuex 状态管理模式,存储管理应用的所有组件的状态
vuex-persistedstate: npm i -S vuex-persistedstate//持久化保存数据,vuex刷新会重新更新状态
// h5 ui框架
mint-ui: npm i mint-ui --save // i也就是install,插件名也可以放到--save后面
muse-ui: npm install --save muse-ui
vant: npm install --save vant
// pc ui框架
element-ui: npm install --save element-ui
以及vscode初次使用需要的配置和插件
1、拓展项(左侧某一个):
vetur --代码高亮,
gitlens --鼠标放的那行代码提交信息(作者,时间,备注),
Auto Complete Tag --自动补全标签,(集成了 Auto Close Tag 和 Auto Rename Tag 的功能,但这两个还是需要在该插件里面单独install)。
ESLint --代码格式校验,格式不规范会报红,鼠标有提示可点击修改。
光标问题(代码是黑色的光标也是黑色的看不清):电脑控制面板-鼠标-指针-自定义-文本选择-浏览-beam_r(其实是带点白的)
2、setting.json
入口
右边随便某个setting.json打开都行
下面是我在用eslint时vue文件不校验(我暂时只用的这个,因为是接手的老项目,并没有开启这些校验,我只想在我开发涉及到的东西不要存在格式问题就行),配置过程中查了点资料,写了几个感觉有用的,其他大家可以自己百度下
{
"diffEditor.ignoreTrimWhitespace": false, // 对比普通模式,忽略空格差异
// vscode默认启用了根据文件类型自动设置tabsize的选项
// "editor.detectIndentation": false,
// 重新设定tabsize
// "editor.tabSize": 2,
// 当保存时,eslint自动帮我们修复错误,包括格式化
// "editor.codeActionsOnSave": {
// "source.fixAll": true
// },
// 保存代码,不自动格式化,盲猜如果使用上面那个又不想格式化配合这个
// "editor.formatOnSave": false
// "eslint.enable": true, // 开启eslint检查,默认应该是开启的吧
// "eslint.run": "onType", // 一旦内容有变化就会运行eslint,检查代码(这个应该是默认的吧);也可以选择 onSave在保存时自动运行eslint
// 对vue和html文件启用校验
{
"diffEditor.ignoreTrimWhitespace": false, // 对比普通模式,忽略空格差异
// vscode默认启用了根据文件类型自动设置tabsize的选项
// "editor.detectIndentation": false,
// 重新设定tabsize
// "editor.tabSize": 2,
// 当保存时,eslint自动帮我们修复错误,包括格式化
// "editor.codeActionsOnSave": {
// "source.fixAll": true
// },
// 保存代码,不自动格式化,盲猜如果使用上面那个又不想格式化配合这个
// "editor.formatOnSave": false
// "eslint.enable": true, // 开启eslint检查,默认应该是开启的吧
// "eslint.run": "onType", // 一旦内容有变化就会运行eslint,检查代码(这个应该是默认的吧);也可以选择 onSave在保存时自动运行eslint
// 对vue和html文件启用校验
// 这种格式可能会报错
// "eslint.validate": [
// "javascript",
// // "javascriptreact",
// "typescript",
// // "typescriptreact",
// {
// "language": "html",
// "autoFix": true
// },
// {
// "language": "vue",
// "autoFix": true
// },
// ]
// 需要改成单字符串形式
"eslint.validate": [
"javascript",
// "javascriptreact",
"typescript",
// "typescriptreact",
"html",
"vue",
]
}
3、操作
打开项目:我只说快捷键,ctrl+r,下拉中快速切换。
方法、文件跳转:页面里面的引入文件、调用方法,鼠标放到该代码上,按ctrl之后,代码下方有下划线,此时点击即可跳转到对应方法、文件所在地方。