1.安装Vue CLI 3
//三选一即可 cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli
注意:
1.如果安装过旧版的VUE CLI需要先卸载掉
//三选一即可 npm uninstall vue-cli -g npm uninstall vue-cli -g yarn global remove vue-cli
2.VUE CLI3需要node.js8.9版本及以上 官方链接》》
2.vue create 搭建新项目
vue create <Project Name> //文件名 不支持驼峰(含大写字母) //如果你在 Windows 上通过 minTTY 使用 Git Bash,交互提示符并不工作,必须通过 winpty vue.cmd create hello-world 启动这个命令
选择第一个就好
3.安装scss
npm install -g sass
4.elementUI
npm i element-ui -S
在 main.js 中写入以下内容:
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
4.axios
npm install axios
在 main.js 中写入以下内容:
import axios from 'axios' Vue.prototype.$http = axios
5.路由
npm install vue-router
在 app.vue中写入以下内容:
<router-view></router-view>
在 main.js 中写入以下内容:
import router from './router.js' new Vue({ router, render: h => h(App), }).$mount('#app')
在src文件夹下创建一个router.js中写入以下内容:
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from './components/HelloWorld' Vue.use(Router) const router = new Router({ routes: [{ path: '/', redirect: "HelloWorld " }, { path: '/HelloWorld', component: HelloWorld }, ] }) export default router