vue-cli脚手架 安装

一. vue-cli 全局安装

若已安装的话能够在命令行中输入 vue -V 查看版本号

npm install --global vue-cli 全局安装

安装完成之后输入命令 vue 能够查看相关命令

 

在网速较慢的状况下能够使用cnpm来下载；

cnpm和npm的用法一致，可是有的时候下载的时候容易丢包

 

二.初始化项目

建立一个基于webpack模板的新项目

 

vue init webpack vue-project(随意名称) 

 

在此过程当中项目项目描述和做者能够随意写，在有标记的地方选择no

ESLint 是提供一个插件化的javascript代码检测工具，例如禁止使用多个空格等，你能够在项目不着急完成的时候用该检测工具；

能够提供ESLint的网址：http://eslint.cn

 

此时打开文件夹，就能够看到有vue-project文件生成

 

package.json是默认生成的项目依赖的包和包使用的版本号

node_modules是下一步骤生成的；

四.安装依赖

输入命令：cd vue-project 进入该文件夹下

npm install  安装依赖

网速慢的状况下用cnpm install;

下面状况安装成功

查看状态：npm start

start为项目的入口文件，你能够查看package.json里面有 "start": "npm run dev", 固然你也能够本身从新命名

当你在页面输入localhost:8080看到vue图标即为安装成功

 

 8080为设置的默认端口号，也能够进行修改

五.项目配置文件介绍

在脚手架中，开发目录是src文件夹，build负责打包的，config是负责配置（内置服务器的端口、proxy代理），static是静态目录，test是测试

src中main.js是入口文件，在里面建立了一个根实例，根实例的模板就是根组件App的模板，其余的组件都在根组件里面进行嵌套实现。

每个组件都是一个单文件组件，这种文件会被webpack利用vue-loader的工具进行编译

template部分负责写组件的模板内容，script中建立组件。style里写组件的样式

assets目录也是静态目录，在这个目标中的文件咱们使用相对路径引入,而static目录中的文件使用绝对地址来引入

在style上添加scoped能使这个style里的样式只做用于当前的组件，不加scoped就是全局样式

习惯于在App.vue根组件的style里写全局样式，而每一个组件的style最好都是局部的