vue学习记录1

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