Node.js\npm\Vue脚手架

最新推荐文章于 2022-10-09 10:52:32 发布

冯小鸟的探戈

最新推荐文章于 2022-10-09 10:52:32 发布

阅读量234

点赞数 1

分类专栏： vue 文章标签： npm

本文链接：https://blog.csdn.net/weixin_46122805/article/details/116244014

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何搭建Vue项目，包括Node.js的安装与配置，npm的使用，以及Vue CLI的安装和项目创建。通过图形化界面或命令行创建项目，设置淘宝镜像加速下载，详细解析了项目结构如main.js、App.vue和index.js，指导了启动项目及安装插件的方法。

摘要由CSDN通过智能技术生成

一、node.js

1、是什么node.js？
	vue的服务器，运行前端项目。node.js中包括了npm，并且node.js会自动配置环境变量
2、什么是npm？
	是node.js的包管理器，可以使用npm下载所需要的包，可以和maven仓库参考理解，npm也是一个存储了大量包的仓库
3、怎么用？
	安装在window系统中，安装包下载地址：
		网盘地址：
	然后点击安装，一直下一步，记得改变安装地址，因为默认会安装到C盘
4、检查安装是否成功？
	打开黑窗口：如下

在这里插入图片描述

	5、设置npm的淘宝镜像
		因为npm是一个国外的服务器，下载东西比较慢，所以可以使用阿里的镜像。
		在黑窗口中，命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
		检查是否成功：cnpm -v
		设置成功后，就可以使用cnpm开头的命令了，npm也可以使用

二、Vue的脚手架

Vue脚手架：用来快速的搭建Vue的项目

1、安装（在黑窗口中）

cnpm install -g @vue/cli

在这里插入图片描述
2、检验脚手架是否安装成功

在这里插入图片描述
3、使用
Ⅰ、使用图形化界面来创建Vue项目

	黑窗口中输入命令：vue ui
	这是打开图形化界面，然后就可以在浏览器中打开

首页：
在这里插入图片描述下一步：
下一步：
下一步：

在这里插入图片描述
工程创建完毕：

在这里插入图片描述

4、给项目安装需要的插件
（1）在图形化界面上安装（推荐使用）
点击“插件”栏，然后搜索需要的插件：
在这里插入图片描述（2）、使用命令模式
使用WebStorm打开刚才创建的项目，然后在工作台中输入命令：

	npm i 插件的名称 -S

在这里插入图片描述 5、启功项目
（1）图形化运行

（2）命令模式运行
在WebStorm的工作台中输入：

	npm run serve

三、项目结构介绍

在这里插入图片描述这个是自己根据需求更改过的项目目录：

1、main.js

	程序入口的配置，这里的设置是全局的。
	比如自己加的全局使用的静态资源，就可以在main.js中设置成项目中所有页面均使用。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//设置全局的css
import './assets/css/globel.css'
//手动加载axios
import axios from 'axios'

Vue.config.productionTip = false

//将axios挂载到vue对象
Vue.prototype.$http=axios;

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')

2、App.vue

	项目的首页

<template>
  <div id="app">
<!--    相当于a标签，跳转到login.vue页面-->
    <router-link to="/login">loign</router-link>
<!--    用来渲染页面，必须加，不然跳转的页面就显示不出来-->
	<router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  }
}
</script>

<style>
<!--这都可以删了-->
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、index.js

	配置页面跳转的路由。首页当中<router-link to="/login">所使用的路径就是在index.js中配置的。index.js中配置路由有两种方式：

第一种：

import Vue from 'vue'
import VueRouter from 'vue-router'
//不论用不用的到，都先加载
import Login from '../views/login.vue'

Vue.use(VueRouter)

const routes = [  
  {
    path: '/login',
    name: 'login',
    //值的名字和上边导入的模块定义的名字相同
    component: Login
  } 
]

const router = new VueRouter({
  routes
})

export default router

第二种：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  //  用到再加载
  {
    path: '/login',
    name: 'login',
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/login.vue')
    }
  }
]

const router = new VueRouter({
  routes
})

export default router