vue学习记录1

Posted 2020-12-17 wenghan

一、通过脚手架安装创建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