vue 小白教程(一)持续更新
2018-11-08 11:36
183 查看
vue项目从无到有
一个前端菜鸟的笔记
初始化(创建)基于vue的项目
init:初始化(创建)基于vue的项目 vue init webpack hello:基于webpack来构建一个名称为hello的vue项目 vue-cli是一个交互式命令行,通过vue命令构建项目会需要我们填写一些项目的信息: Project Name:要创建的项目名称(该命令会生产一个package.json文件,文件中的name选项就是这个ProjectName, 默认为当前创建的项目目录名称,也可以自行制定(但是需要符合package.json中name命名规则,不要出现大写字母, 空格,下划线,可以使用 - ) Project Description:项目简介,也会出现在package.json文件中,可选 Author:作者,可选 下一步直接回车 Install vue-router:是否安装vue路由组件,做项目的话一定要安装 Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测 //个人开发建议关闭,公司开发必须开启,代码检测会让你的代码至少看起来从格式上整洁 Setup unit tests with Karma + Mocha?:是否安装测试(单元测试) Setup e2e tests with Nightwatch?:是否安装端到端的测试
通过vue-cli完成配置以后,项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明:
一般需要的安装包需要哪个就安装哪个,国内使用npm需安装淘宝镜像 项目使用模块具体安装过程: cnpm install 安装包 --save 例如: cnpm install axios --save 在package.json文件中在devDependencies就可看到安装包的版本号 dependencies:项目中实际需要使用到的依赖包 devDependencies:项目开发过程中需要使用的一些工具包,不是项目实际线上代码的一部分
项目结构
-
build目录:构建项目命令所需要使用到的一些脚本文件和配置文件
-
config目录:在vue-cli中会自动安装一个小型的express搭建的热重载web服务器,config里面就是关于这个服务器的相关配置
-
dist目录:项目编译构建上线后的存放目录
-
node_modules目录:项目依赖包存放目录
-
src目录:项目源代码存放目录
-
static目录:静态资源存放目录
在项目开发过程中,我们的大部分任务是在src这个目录下完成的
- main.js:vue脚手架为我们自动生成的项目中设置的入口文件,在该入口文件中,做了一些项目初始化的工作
- 引入 Vue
- 引入必要的组件
- 创建Vue实例
运行
所需要的安装依赖包安装完成以后,就可以启动项目,运行
npm run dev: 开启一个测试开发环境
npm run build : 构建项目,把项目进行打包,我们可以把项目打包后的文件上传到服务器
rt.js/
相关文章推荐
- vue.js 教程 思维导图 百度脑图分享 会持续更新
- 几个非常好的opencv教程【持续更新】
- 针对Vue的后台权限功能实现思路(持续更新) 3ff8
- iOS/iPhone学习系列、代码教程----~~~持续更新中~~~
- sublime3+quick3.5 完整使用教程(持续更新)
- vue小白入门教程
- android 编译环境 & 开发教程 【持续更新】
- [置顶] 编程工具使用教程汇总(持续更新)
- 各种编程开发工具破解教程(持续更新...)
- Java工程师常见面试题集锦(三)互联网人必看!(附答案及视频教程,持续更新!)
- Vue学习过程中的问题记录本(持续更新)
- Vue使用问题解决记录(持续更新)
- Arduino uno 教程~持续更新~
- Sublime Text 3 全程详细图文原创教程(持续更新中。。。)
- 小白自学搭建单机版的Hadoop生态圈(持续更新)
- 张孝祥java系列教程下载(将持续更新)
- ionic项目实战-小白踩坑走起【2017/3/7起·持续更新】
- 网络/安全/虚拟化/职业规划视频教程(持续更新)
- 分享一百多套开发视频教程的下载地址 持续更新收录中。。。。
- cocoaPods使用教程 持续更新