- vue 把一个组件放在一个
.vue
文件中,在这个文件中有三个自定义标签:template、script、style,但是浏览器不能直接识别该组件,因此需要通过 webpack 进行打包编译,官方提供 vue-loader 对 .vue 文件进行处理。 - vue-cli 是 vue.js 的脚手架工具,使用之前需要安装 node 和 npm 包管理工具。
- vue实际开发使用
.vue
的单文件系统来实现,但是还需要哦诶只很多东西,因此有了 vue-cli 来构建一个项目开发必须使用的一些内容,我们称这个工具为:脚手架。
通过npm install vue-cli -g
安装好之后,我们可以在命令行使用一个命令:vue -
vue init
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 工具中自动生成的 package.json 文件中有说明
dependencies:项目中实际需要使用到的依赖包
devDependencies:项目开发过程中需要使用的一些工具包,不是项目实际线上代码的一部分 - 运行
所需要的安装依赖包安装完成以后,就可以启动项目,
npm run dev
:开启一个测试开发环境 - 项目结构
- build目录:构建项目命令所需要使用到的一些脚本文件和配置文件
- config目录:在vue-cli中会自动安装一个小型的express搭建的热重载web服务器,config里面就是关于这个服务器的相关配置
- dist目录:项目编译构建上线后的存放目录
- node_modules目录:项目依赖包存放目录
- src目录:项目源代码存放目录
- static目录:静态资源存放目录
- main.js:vue脚手架为我们自动生成的项目中设置的入口文件,在该入口文件中,做了一些项目初始化的工作
- 引入 Vue
- 引入必要的组件
- 创建Vue实例
在项目开发过程中,我们的大部分任务是在src这个目录下完成的
初始化Vue项目
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 一、初始化项目 1. vue-cli vue-cli 是 vue.js 的脚手架工具,可以帮助我们编写基础代码、快...
- 一、初始化项目首先,进入到项目目录然后用npm初始化项目 然后会让输入一些信息,这里我只写了文件名和作者然后会打出...