Vue-cli（1）--初始Vue-cli

一、全局安装vue-cli

打开Vue-Cli官网，找到安装界面，复制安装包的代码。再Windows+R打开电脑终端，输入cmd，粘贴安装指令。

Vue-Cli官网：https://cli.vuejs.org/zh/guide/installation.html
可以使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确：

vue --version

如需升级全局的 Vue CLI 包，请运行：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

二、创建项目

1、在文件夹中打开终端，创建文件名为demo的项目。注意：要在cmd环境下安装

在当前文件目录中输入以下代码

vue create demo

2、创建成功后

在package.json文件中，可以看见有生产环境依赖（dependencies: 可以参与项目打包）和开发环境依赖（devDependencies:不能参与项目打包）

components文件夹中可以存放组件，App.vue是全局组件，main.js是入口文件。

注意：xxx.vue是vue的单文件组件。每个vue的单文件组件由3个部分组成，template里面放置模板内容，script里面放置js代码，style里面放置样式。

main.js文件中写入以下代码

//导入vue
import Vue from 'vue'
//导入app组件
import App from './App.vue'
//不显示生产提示
Vue.config.productionTip = false
//创建vue实例
new Vue({
  //render是渲染函数
  render: h => h(App),
}).$mount('#app')

在开发环境中运行可以在当前终端文件目录里输入以下代码

npm run serve

执行完成后，会出现以下界面，点击任何一条网址并按住Ctrl键来运行项目。

image.png

在开发环境中打包可以在当前文件目录里输入以下代码

npm run build

在components文件中创建一个新的组件Child.vue。注意：组件名称一般开头大写。在组件里写入以下代码。

在全局组建中引入、注册、使用子组件。

template>
  

     
{{title}}
     
汽车信息：{{car}}
     
飞机信息：{{planeName}}--{{planePrice}}
     
  

在components文件夹里在创建一个新的子组件Element-UI组件。首先需要重新开启一个终端，并在当前demo文件目录里安装Element-UI包。
Element-UI官网地址：https://element.eleme.cn/#/zh-CN/component/installation

npm i element-ui -S

在 main.js 中写入以下内容：

//导入Element-UI组件库
import ElementUI from 'element-ui';
//导入Element-UI组件库的样式
import 'element-ui/lib/theme-chalk/index.css';
//由于Element-UI组件库是插件，所以必须要use
Vue.use(ElementUI);

在Element.vue文件里面可以直接从官网上复制代码来使用。

在全局组件中导入、注册、使用Element-UI子组件。

在components文件夹里再创建一个新的子组件Charts组件。首先需要重新开启一个终端，并在当前demo文件目录里安装 ECharts包。
ECharts官方地址：https://echarts.apache.org/zh/index.html

npm install echarts --save

注意：为了避免弹出提示语句‘定义但没有使用’，我们需要在package.json文件中，加入以下代码。更改了package.json文件，就一定要退出当前终端（ctrl+C之后 再次运行npm run serve）

 "rules": {
      "no-unused-vars":"off"
    }

在Charts.vue文件中可以写入以下代码。

在全局组件中引入、注册、使用Charts子组件。