服务器对大前端扫盲 Vue.js + Element-UI(5)

页面上每个独立的可视或者可交互的区域均视为一个组件，每个组件对应一个工程目录(文件夹)，组件所需要的各种资源尽可能的都放在这个目录下就近维护(即将模板、样式、js等都写在一个.vue文件中)，组件可以嵌套自由组合，形成完整的页面。

5.2 vue脚手架初始化项目

# 1.安装vue-cli脚手架(用于初始化项目) 

$ npm install -g vue-cli 

$ 2. 创建项目 

$ vue init webpack <project name> 

# 3. 安装cnpm(此步骤不是必须的) 

# 有些npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所以还需要npm的国内镜像—cnpm 

npm install -g cnpm –registry=http://registry.npm.taobao.org 

# 4. 安装依赖包 

$ cd <project name> 

# cnpm 需要单独安装，如果没有cnpm可以使用npm来代替 

$ cnpm install 

# 5. 启动程序就可以在浏览器访问 

$ npm run dev 

# 6. 在浏览器访问localhost:8080 

5.3 脚手架目录结构

build : webpack相关的配置

config：webpack相关的配置，index.js中可以配置服务的端口，默认是8080, useEslint默认是true，当启动检查代码格式时可以设置为false

node_module : npm install安装的依赖代码库

src : 源码文件，开发都会在该目录下进行

assets: 存放一些静态资源

components：组件，存放.vue文件，每个组件分为三部分：template、script、style

router：路由，配置url路径对应的组件

App.vue

main.js ：entry入口文件

static : 存放一些静态资源

test：单元测试相关

.babelrc: babel编译的相关配置

.editorconfig : 编辑器相关的配置(比如字符集、缩进的空格等)

.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略

（编辑：ASP站长网）