Vue开发环境搭建 (2)

Vue开发环境搭建

切换到该目录:

Vue开发环境搭建

用vue-cli命令,快速搭建一个webpack的项目:vue init webpack

Vue开发环境搭建

Vue开发环境搭建

前几项都是默认或者yes

下面我们选no

Vue开发环境搭建

最后,再选yes,使用npm安装

Vue开发环境搭建

开始初始化项目,并安装依赖,可能需要

Vue开发环境搭建

安装成功

Vue开发环境搭建

可以使用npm run dev命令启动。

5 项目结构

安装好的项目结构

Vue开发环境搭建

入口文件:main.js

Vue开发环境搭建

5.1 单文件组件

需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件。

Vue开发环境搭建

每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的login.js和register.js

只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。

而单文件组件中包含三部分内容:

template:模板,支持html语法高亮和提示

script:js脚本,这里编写的就是vue的组件对象,还可以有data(){}等

style:样式,支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。

6 运行

看看生成的package.json

Vue开发环境搭建

可以看到这引入了非常多的依赖,绝大多数都是开发期依赖,比如大量的加载器。

运行时依赖只有vue和vue-router

脚本有三个:

dev:使用了webpack-dev-server命令,开发时热部署使用

start:使用了npm run dev命令,与上面的dev效果完全一样,当脚本名为“start”时,可以省略“run”。

build:等同于webpack的打包功能,会打包到dist目录下。

我们执行npm run dev 或者 npm start 都可以启动项目:

Vue开发环境搭建

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyxwgz.html