用vue-cli搭建vue项目
把手教你用vue-cli搭建vue项目
本篇主要是利用vue-cli来搭建vue项目,其中前提是node和npm已经安装好,文章结尾将会简单提到一个简单的例子。使用vue-cli搭建项目最开始我也是看网上的教程一步步搭下来,所以其中的一些步骤说法为了表达正确会进行一定参考。
一、 项目使用技术、框架简单介绍
我们使用vue-cli来搭建整个项目,vue-cli就是一个脚手架,步骤很简单,输入几个命令之后就会生成整个项目,里面包括了webpack、ESLint、babel很多配置等等,省了很多事。根据小高之前给的要求以及结合DSS项目中的经验,我们今天搭建的项目结构组成为:
Vue+ ESLint + webpack + iview+ES6
Vue: 主要框架
ESLint: 帮助我们检查Javascript编程时的语法错误,这样在一个项目中多人开发,能达到一致的语法
Webpack: 设置代理、插件和loader处理各种文件和相关功能、打包等功能。整个项目中核心配置
iview: 是基于vue的一套样式框架,里面有很多封装好的组件样式
ES6: 紧跟时代潮流,使用ES6语法,利用babel处理。
二、 安装vue-cli
打开cmd ,敲入命令:
npm install --global vue-cli (–global:全局安装)
安装好之后打开C:\Users\Administrator\AppData\Roaming\npm 可以看到这个文件夹下已经有相关的脚本文件,如图:
此时vue-cli已经安装好啦,往下走
三、 创建项目
cmd打开自己的项目工作空间,然后敲入命令:
vue init webpack test(其中test为我的项目名称)
然后终端会出现下图“一问一答”模式,如图:
这里有几个需要说明一下,没说明的直接回车选择默认就好,对项目没多大影响,很傻瓜式:
“Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车
“Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成相关的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安装单元测试。由于我们现在还没有单元测试,所以这里选择的是”N”,而不是直接回车哦
“Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”
这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
3.全部选择好回车就进行了生成项目,最后生成的目录结构如下图:
此时项目已经基本搭建完成。接下来和大家说明一下目录结构~
四、 目录结构说明
- build 文件夹:
如上图,这个文件夹主要是进行webpack的一些配置,就我个人觉得啊~对我们最有用并且可能会使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三个webpack的配置文件,分别是基本webpack配置、开发环境配置、生产环境配置。实际上这些文件里面的内容,一些简单的配置都已经有了,包括入口文件、插件、loader、热更新等都已经配置好了。我们要做的只是根据自己的项目有什么loader需要增加的,比如生成环境需要加上UglifyJsPlugin插件等可以自行配置,或者一些插件增加或者不需要的删除,其实都是和业务相关了,其他的都可以不需要动。
- config 文件夹:
如上图,这几个配置文件我觉得最主要的就是index.js 这个文件进行配置代理服务器,这个地方和我们息息相关,和后台联调就是在这里设置一个地址就可以了。打开index.js 找到“proxyTable“这个属性,然后在里面加上对应的后台地址即可,例如:
- src文件夹:
这个文件夹是整个项目最主要以及使用频率最高的文件夹。
“assets”: 共用的样式、图片
“components”: 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件
“router”: 设置路由
“App.vue”: vue文件入口界面
“main.js:对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置
4.static 文件夹:
存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
5.package.json:
这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是
npm run dev ;例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包
五、 下载依赖包
上一步我们已经生成好项目,现在打开之前说过的package.json 文件,找到devDependencies 和 dependencies ,在这里面可以删掉我们不需要的,其他就则都需要使用 npm install 下载安装,例如vue: npm install vue –save-dev
这个过程会生成一个node_modules 文件夹,这一个过程可能会有一点耗时间,但是也是傻瓜式,一个个下载,下载好之后输入npm run dev 。如果有哪些缺漏的都会提示再补下载就好了
六、 npm run dev
当所有依赖包都下载好之后,输入命令:npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧,总结下来其实只有四步
npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目,形成基本结构
npm install 依赖包
npm run dev 运行
我们接下来要做的就是业务相关的了,vue 就是一个个组件往里面加就可以了。
一个简单的vue项目
在上面的基础我写了一个简单的vue项目,主要改动的文件如下:
build/webpack.base.config.js
进行loader的配置,以及有一个iview的css文件不进行babel的处理,如下
- src/router/index.js: import引入组件文件,根据vue-router写上相应的路由配置
3.src/components:
业务代码集中地,我做了一个简单的,只有三个组件。然后在每个组件中又分成几个组件构成,具体的语法需要自行学习vue
https://www.cnblogs.com/liaoanran/p/8042893.html
用vue-cli搭建vue项目相关推荐
- vue = 什么意思_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- cli vue 卸载_记录使用@vue/cli搭建Vue3项目完整流程
最近发现vue两大UI框架Element UI和Ant Design Vue都已经支持Vue3了,如果再不学习Vue3就落伍了,此文章记录下使用@vue/cli搭建Vue3项目完整流程. 1 安装vu ...
- vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
- Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目 源码(欢迎star): 前端项目代码 后端项目代码 系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
- Vue CLI3搭建的项目中,如何给文件夹起别名?
因为这段大年的时间里,好久没写博客了,是好懒散了.真的是少年易老学难成,一寸光阴不可轻啊.浪费一秒钟是一秒钟的罪过. 我们使用Vue CLI3搭建的项目中,在vue.config.js文件中,在给文件 ...
- vue CLI脚手架搭项目
1.安装 node.js环境 官网下载:https://nodejs.org/en/download/ 一直默认就行,路径可以改变但要记得到 安装完成后cmd打开终端,输入node -v ,npm - ...
- 使用Vue cli创建Vue项目
使用Vue cli创建Vue项目 第一步:安装node.js 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装 ...
- 使用 Vue CLI 创建 Vue 2.x 项目
使用 Vue CLI 创建 Vue 2.x 项目 什么是 Vue CLI 使用 Vue CLI 创建 Vue.js 项目 1. 准备 Node 和 npm 1.1 检查 Node 版本: 1.2 检查 ...
- Vue CLI脚手架新建项目
Windows PowerShell 版权所有(C) Microsoft Corporation.保留所有权利.安装最新的 PowerShell,了解新功能和改进!https://aka.ms/PSW ...
- Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
最新文章
- 北京大学 李胜 计算机,计算机科学技术系汪国平-李胜团队在虚拟现实领域取得系列进展...
- vue实现点击改变颜色
- CTFshow 信息收集 web16
- [转]配置子报表和钻取报表
- Union-find
- Java命令行界面(第14部分):google-options
- 【OS学习笔记】二十 保护模式六:保户模式下操作系统内核如何加载用户程序并运行 对应的汇编代码之主引导扇区程序
- MATLAB保存当前窗口图像
- GridView 通用分页
- SpringBoot四大核心之actuator——程序监控器
- 征信考量社交化和大数据化
- Protel99SE多张原理图的设计步骤
- 关于补天SRC新手入门详细介绍(通用漏洞篇)
- 福建船政交通职业学院计算机应用技术录取,福建船政交通职业学院单招2020年(单独招生录取分数线)...
- 微信公众号查券返利机器人搭建教程
- STM32定时器捕获编码器模式测速和方向测不准问题
- 《深入浅出4G网络 LTE_EPC》阅读笔记一
- 奥迪A4显示服务器出故障,奥迪A4变速箱锁挡、没倒挡、红屏、传感器故障维修总结...
- php服务器内容修改时间,php设置服务器时间
- 微信小程序获取并展示公众号推文