博客

搭建Vue环境及创建vue项目



1、为了提高我们的效率，可以使用淘宝的镜像：http://npm.taobao.org/

输入：


npm install -g cnpm –registry=https://registry.npm.taobao.org


即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了。

检查是否安装成功：输入


cnpm -v


2、全局安装vue-cli


npm install -g @vue/cli 或 cnpm install -g @vue/cli


(cnpm 安装环境和依赖包会更快 推荐使用cnpm)

创建指令：

//app是创建项目的名称
vue create app

注意：

在创建项目的时候应该先下载node + webpack + 淘宝镜像（方便下载依赖包）

项目内文件的作用



**nade_modules文件夹：**项目依赖


public文件

：一半放置一些静态资源（图片），需要注意，放在public文件夹内的的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中


src文件夹（程序员源代码文件夹）：

1. assets文件夹：一般也是防止静态资源（通常是多个组件公用的静态资源）,在assets文件夹中的静态资源在webpack打包的时候当作一个模块，放入JS文件夹里面。
2. compents文件:一般是放置非路由组件（全局组件）
3. App.vue:唯一的根组件
4. main.js:项目入口文件，也是整个项目中最先执行的文件
5. babel.config.js:配置文件（babel相关）
6. package.json:项目身份证，记录项目叫什么，项目中有那些依赖。项目如何运行
7. package-lock.json:缓存性文件
8. README.md:项目说明文件

项目运行


执行语句：

npm run serve

运行起来不会浏览器自动打开，徐复制网址在浏览器中打开。要让其自动打开，需要配置。

package.json
"scripts": {
    "serve": "vue-cli-service serve --open",  //加上 --open执行后就会自动打开浏览器
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

eslint校验关闭


在根目录下创建vue.config.js文件

module.exports = {
	//关闭eslint
	lintOnSave:false,
	//配置代理跨域
	devServer: {
		proxy: {
		  "/api": {
			target: "http://xx.xx.xx.xxx",
		  },
		},
	  },
}

src文件简写方法，配置别名。@


根目录下创建jsconfig.json

{
 	"compilerOptions":{
 		"baseUrl":"./",
 		"paths":{
 			"@/*":[
 				"src/*"
 				]
 			}
 		},
 		"exclude":[
 			"node_modules",
 			"dist"
 			]
 }

路由


分析：

路由组件（会改变）：Home首页路由组件、Search路由组件、Login路由组件、Refister路由组件

非路由组件(保持不变)：header、footer

注意

1. 项目采用的是less样式，浏览器不识别less样式，需要通过less、less-loader进行处理less，把less样式识别为css，浏览器才可以识别。安装语句(@5标识版本5)：
   
npm install less less-loader --save@5

2. 如果想让组件识别less样式，还需要再style标签上加上lang=less

<style scoped lang="less">
	.home{
	 	background:#fffeee;
	 }
</style>

路由组件的搭建

1. 需要安装插件vue-router

npm install --save vue-router

2. components文件夹：经常放置非路由组件（公用全局组件）
3. pages|views文件：放置路由组件
4. 
配置路由

   
   项目中放置的路由一般放置在route.js中

//配置路由的地方  route.js
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引入路由
import Home from '@/pages/Home'
import Search from '@/pages/Rearch'
//配置路由
export default new VueRouter({
	routes:[
		{
			path:"/home",
			component:Home
		},{
			path:"/search",
			component:Search
		}，
		//重定向：项目跑起来的时候,访问/，立马定向到首页
		{
			path:"*",
			redirect:"/home"
		}
	]
})

//main.js
import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router'
new Vue({
 //注册路由
 //但这里书写router时候，组件身上都拥有$route,$router属性
 router,
 render:h => h(App)
 }).$mount('#app')
 

总结

1. 路由一般放在pages|views文件中。非路由放在components文件夹中
2. $route:一般获取路由信息（路径、query、params等等）
3. $router:一般进行编程时导航进行路由跳转【push|replace】