一、通过脚手架安装创建vue项目
1、安装vue脚手架
npm install -g @vue/cli
2、通过命令 vue create 项目名称 来创建vue基础项目
如:vue create my-project
3、执行npm run serve 来执行项目
注意:通过脚手架创建的项目,已经创建好了node_modules包文件,不需要通过webpack进行打包上线,如果是通过手动创建的,则可以使用webpack打包
二、通过vue ui图形化界面的方式来创建vue基础项目
在cmd命令行窗口中直接输入vue ui命令,即可打开图形化创建界面
如果需要使用其他的框架,则需要安装
创建package.json文件: npm init -y
查看npm版本 : npm -v
按照包:npm install
初始化项目:npm init
执行项目:yarn run serve
使用antd-vue搭建项目步骤
1、安装node.js、yarn (如果已经安装了,则可以不安装)
2、使用脚手架创建vue基础项目
$ npm install -g @vue/cli
# 或者
$ yarn global add @vue/cli
3、安装好了脚手架以后,通过命令初始化项目
vue create 项目名称 如:vue create antd-demo
4、通过npm run serve 或者 yarn run serve 启动项目
此时浏览器会访问 http://localhost:8080/ ,看到 Welcome to Your Vue.js App 的界面就算成功了。
5、通过命令安装antd相关包
yarn add ant-design-vue
yarn add babel-plugin-import
6、在项目main.js入口文件中,导入antd包
在main.js以下是按需导入antd组件:
import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';
Vue.component(Button.name, Button);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
在babel.config.js文件中配置css:
presets: ["@vue/app"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"} //注意官网这里是style:true,这可能会导致报错。建议使用style:"css"
]
]
在main.js直接导入antd全部包组件(不想麻烦直接使用这个):
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在babel.config.js文件中配置css:
将:{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css"}
改为:{ libraryName: "Antd", libraryDirectory: "es", style: "css"} //提醒:这里style:"css"可改为style:true且不会报错,这样改后会加载包里的less文件而非css文件。不改也没影响
7、将项目中的about、home、helloworld组件全部删除,新建Login.vue和dashbroad.vue页面,编写登录功能,
登录之后跳转到dashbroad页面,并使用layout组件和menu组件搭建页面,左侧菜单使用子路由配置dashbroad页面
8、安装axios
yarn add axios
9、新建config文件夹,新增Index.js文件,配置请求api接口地址
const mode = 'development'
const config ={
development:{
baseURL:'http://127.0.0.1:9090/v1'
},
production:{
baseURL:'http://127.0.0.1:9089/v2'
}
}
module.exports = config[mode]
10、在main.js中配置axios
import axios from 'axios'
// 配置请求api根路径
axios.defaults.baseURL= config.baseURL
// axios请求拦截
axios.interceptors.request.use(config =>{
// 为请求头对象,添加token验证的Authorization字段
// config.headers.Authorization = window.sessionStorage.getItem('token')
config.headers.Authorization = 'Bearer ' + window.sessionStorage.getItem('token')
return config
})
// 将axios挂载到vue的原型中,可通过 this.$http.get等 全局使用
Vue.prototype.$http = axios
11、配置store状态树
vuex主要是存储共享数据,当一些大部分公共组件都需要使用的数据,可使用store仓库来存储共享的数据
搭建vue项目案例1:https://www.cnblogs.com/hellman/p/10985377.html<br data-filtered="filtered"><br data-filtered="filtered">12、nuxt.js项目部署到IIS服务器上<br data-filtered="filtered"> https://www.cnblogs.com/stealth7/p/7346963.html