Vue项目的创建

一、创建Vue    

　　　 ---Cmd控制台输出 或  在Vue终端编辑  执行方式一、方式二命令

　　   方式一：   vue  init  webpack  项目名称               运行：npm start /npm run serve

      方式二： vue ui  浏览器打开进行创建编辑         运行：npm run serve 

方式二步骤：

控制台输入 vue ui ，回车

 跳转至浏览器打开如下页面

   

二、安装组件Element和安装axios

1、引用ElementUI，官网： https://element.eleme.cn/#/zh-CN/component/installation

• • 安装elementui命令： npm i element-ui -S
  • 在 main.js 中写入以下内容：

              import ElementUI from 'element-ui';

              import 'element-ui/lib/theme-chalk/index.css';

     Vue.use(ElementUI);

2、引用Axios，官网： http://www.axios-js.com/zh-cn/docs/vue-axios.html

• • 安装Axios命令： npm install --save axios vue-axios
  • 在 main.js 中写入以下内容：

第一种：

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

使用时用法：  this.axios.get/post/delete/put(Url).then(res=>{})

第二种：在原型链上挂载axios

Vue.prototype.$axios=axios;

使用时用法：this.$axios.get/post/delete/put(Url).then(res=>{})

三、Vue运行项目时疑惑

　　 1、运行时命令不同原因            npm run serve /npm run dev

           npm run __   为执行别名       

           根据package.json文件中"scripts"里的别名进行书写run后面的别名

　 

   

    2、当用Vue ui  命令创建项目时，运行时会生成两个路径                         　　

四、项目创建成功后再vscode中打开项目

文件所在目录打开控制台

输入 code. 回车

 项目打开