脚本宝典收集整理的这篇文章主要介绍了从0搭建vue后台管理项目到颈椎病康复指南(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
网上搜索了很久Vue项目搭建指南,并没有找到写的比较符合心意的,所以打算自己撸一个指南,集合众家之所长(不善于排版,有点逼死强迫症,如果觉得写的有问题,可以留言斧正,觉得写的太差的,可以留言哪里差, 有不好的地方改,欢迎调侃)。
本次搭建主要采用
1. Vue 2
2. Vue Router
3. Vuex
4. axios
5. elementUI
6. webpack
7. node
1.创建项目文件夹个人比价喜欢使用cmd创建文件夹,毕竟接下来下载vue-cli官方脚手架还是的用。
mkdir vue-cli-PRoject // 创建vue项目文件夹
cd .vue-cli-project // 进入vue项目文件夹
npm i -g cnpm // 全局安装cnpm (淘宝镜像)
npm i -g vue-cli // 安装vue脚手架
2.创建完项目文件夹后,首先初始化项目 # vue inIT [vue-cli模板名称] [项目文件夹]
vue init webpack
出现如下图所示,即表示项目初始化完成
接下来安装依赖
cnpm i
2.现在我们的项目已经初步搭建完成,可以尝试运行 npm run dev 测试运行是否正常。如果在浏览器能看到下图的画面,标识我们截至目前搭建的一切都正常
项目运行起来碰到第一个坑, 我们在npm run dev的时候发现,我们的代码跑起来之后发现并没有帮我们自动打开浏览器,在这里我们需要修改webpack.json文件中的一个值, 找到script 行,在dev后面加上--oPEn 这样我们在跑起来代码后会自动帮我们打开浏览器。
先讲讲为什么要规范我们的项目文件夹。
我们在搭建一个项目,一般情况下会有公共的方法文件(tools.js),静态资源(图片,字体,字体图标),项目配置文件,webpack打包后的文件夹(打包时会自动生成), 业务文件等,如果都放在一起了,如果改某个文件,很难找,真的很乱,(吐槽神略500+字)......
项目文件结构
├─build @H_910_126@# build脚本,主要用于打包和运行某环境的配置脚本
│
├─config # 配置运行脚本的配件文件
│
├─src # 代码资源文件夹
│ ├─appConfig # 业务配置文件夹,一般情况下存放的是,外部链接,请求api,全局组件统一配置文件等
│ ├─assets # 静态资源文件夹
│ ├─components # 全局组件文件
│ ├─lib # 工具类
│ ├─locale # 国际化I18N配置文件夹
│ ├─router # 路由配置文件夹
│ ├─Store # Vuex 配置wen'jian'jia
│ ├─style # 全局样式配置文件夹
│ └─views # 业务文件夹
└─static # 外部静态配置文件
这样我们的文件目录就搭建好了,接下来我们就来具体实现一下具体的配置
以上是脚本宝典为你收集整理的从0搭建vue后台管理项目到颈椎病康复指南(一)全部内容,希望文章能够帮你解决从0搭建vue后台管理项目到颈椎病康复指南(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。