使用命令行创建一个vue2项目

前置需要安装Node和vue-cli

在想要创建项目的文件夹进行操作：

直接创建

vue create small-demo

输入命令后出现以下界面：

我们选择手动创建

使用空格选择，回车确认

哈

哈

哈

然后只需稍微等待就完成了

启动脚手架的命令：

注意要进入项目里面运行命令，在能看到package.json的位置运行脚手架

 npm run serve

安装elementui组件：

 npm i element-ui -S

并且在main.js中引入

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

 //让Vue引入使用ElementUI
 Vue.use(ElementUI);

​

安装axios：

 npm install --save axios
 npm  i  --save axios

并且在main.js中引入

 importaxiosfrom'axios';

 //设置路径的默认前缀
 axios.defaults.baseURL="http://localhost:8081"
 //把axios挂载到vue对象
 Vue.prototype.$http=axios;

​

安装qs：

 npm install qs

并且在main.js中引入

 import qs from 'qs'

vue文件模板：

 <template>
     <divclass="cla"></div>
 </template>
 <script>
 exportdefault {
     props: {
         //注册属性 父传子 数据传递
     },
     data() {
         return {};
     },
     created(){
         //created在模板渲染成html前调用，通常在这里初始化某些属性，然后再渲染视图
     },
     methods: {
         
     },
     components: {
         //组件注册
     },
 };
 </script>
 <style>
 </style>

脚手架axios模板：

注意上面安装的axios挂载到vue对象的名字

 varmyThis=this;
 this.$http.get('/userinfo/queryAll')
     .then(function (response) {
         console.log(response);
         myThis.userlist=response.data;
     })
     .catch(function (error) {
         console.log(error);
     })
     .finally(function () {
         });