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最好都是局部的

原文地址:https://www.cnblogs.com/naniandongzhi/p/8075651.html