前端（二十三）—— Vue环境搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue环境搭建" title="vue环境搭建">vue环境搭建">一.Vue环境搭建

目录

  • 一.Vue环境搭建
      • 1.安装node
      • 2.安装全局vue脚手架
      • 3.创建项目
      • 4.启动项目
      • 5.项目目录
      • 6.项目开发

1.安装node

  • 去官网下载node安装包

  • 傻瓜式安装

  • 万一安装后终端没有node环境，要进行node环境变量的配置(C:\Program Files\nodejs)

  • 可以通过node提供的npm包管理器安装vue脚手架

  • 通过npm安装淘宝镜像cnpm，将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)

2.安装全局vue脚手架

  • 起管理员终端(mac: sudo)

  • cnpm install -g @vue/cli

  • 如果安装失败，检测网络，请npm缓存(npm cache clean --force)后重新安装

3.创建项目

  • 采用可视化方式创建(vue ui)

  • 命令行

1.打开终端
2.去向目标目录(将项目创建在该目录)(cd 目标目录)
3.指令创建项目(vue creat 项目名)
4.选择自定义:Manually select features
5.用空格选取所需插件:Router， Vuex
6.采用Router的history...
7.在目标目录创建一个项目名的文件夹，该文件夹就是所创的项目

4.启动项目

1.进入项目目录
2.启动服务器(npm run serve)
3.退出服务器|刷新服务器(ctrl+c)
4.项目完成后，在项目目标下可以进行项目打包发布，要提前做配置(npm run build)

5.项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标，书写代码的地方
	-- assets:资源
	-- components:组件
	-- views:视图组件
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

6.项目开发

  • vue.config.js

module.exports={
	devServer: {
		port: 8888
	}
}
// 修改端口，选做

  • main.js

// 不用修改
// 采用之前的语法创建根实例
new Vue({
	el: "#app",
	router: router,
	store: store,
	render: function (h) {
		return h(App)
	}
})

  • *.vue

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部， scoped与style绑定出现 */
</style>

以上是 前端（二十三）—— Vue环境搭建 的全部内容， 来源链接： utcz.com/z/380699.html

回到顶部