Mac下搭建VUE项目
- 说明:本人电脑之前安装过node和npm,这里按照官网提供的方法简单编写;
- 操作系统:macOs
- 系统版本:10.15.5
1.安装node,npm环境
你可以通过以下两种方式在 Mac OS 上来安装 node:
- 1、在官方下载网站下载 pkg 安装包,直接点击安装即可。
- 2、使用 brew 命令来安装:
brew install node
可能出现的问题:
在 MAC 上安装使用 brew install nvm, 其中 brew 是 Homebrew。
安装 nvm 后可能会出现 zsh: command not found: nvm,我们可以使用以下命令来安装:
curl -o- [https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh](https://raw.githubusercontent.com/creationix/nvm/v0.25.4/install.sh) | bash [[ -s $HOME/.nvm/nvm.sh ]] && . $HOME/.nvm/nvm.sh
使用
nvm ls-remote 查看有哪些node版本可以安装
nvm 用于管理node 版本
nvm list 查看当前所有的node 版本
nvm install v10.13.0 安装指定的版本,安装多版本
nvm use —delete-prefix 10.13.0 使用nvm use切换到指定的版本
nvm current 查看当前node版本
nvm alias default <version> 命令来指定一个默认的node版本
安装完成后在终端输入(如图所示):出现版本即可表示安装完成
2.搭建vue项目环境
- 1、全局安装vue-cli
npm install --global vue-cli
- 2、进入你的项目目录,创建一个基于 webpack 模板的新项目:
vue init webpack 项目名
说明:
- Vue build ==> 打包方式,回车即可;
- Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
- Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
- Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
- Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
- 3.进入项目:cd 5gmessage,安装依赖
cnpm i
- 4、npm run dev,启动项目
浏览器访问:localhost:8080
3.vue项目目录
- 目录解析
目录/文件 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
node_modules | npm 加载的项目依赖模块 |
src | 这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件 |
static | 静态资源目录,如图片、字体等。 |
test | 初始测试目录,可删除 |
.xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
package.json | 项目配置文件。 |
README.md | 项目的说明文档,markdown 格式 |
-
1、build:构建脚本目录
-
1)build.js ==> 生产环境构建脚本;
-
2)check-versions.js ==> 检查npm,node.js版本;
-
3)utils.js ==> 构建相关工具方法;
-
4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;
-
5)webpack.base.conf.js ==> webpack基本配置;
-
6)webpack.dev.conf.js ==> webpack开发环境配置;
-
7)webpack.prod.conf.js ==> webpack生产环境配置;
-
-
2、config:项目配置
-
1)dev.env.js ==> 开发环境变量;
-
2)index.js ==> 项目配置文件;
-
3)prod.env.js ==> 生产环境变量;
-
-
3、node_modules:npm 加载的项目依赖模块
-
4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件
-
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
-
2)components:组件目录,我们写的组件就放在这个目录里面;
-
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
-
4)App.vue:根组件;
-
5)main.js:入口js文件;
-
-
5、static:静态资源目录,如图片、字体等。不会被webpack构建
-
6、index.html:首页入口文件,可以添加一些 meta 信息等
-
7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
-
8、README.md:项目的说明文档,markdown 格式
4.开始vue项目
- 1、在components目录下新建一个views目录,里面写我们的vue组件
- 1)开始我们的第一个组件:
- a:在views目录下新建home.vue
- b:在router目录下的index.js里面配置路由路径
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import home from '@/components/views/home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/views', name: 'home', component: home }, ] })
- c:编写App.vue 中的template 写 html,script写 js,style写样式
<template> <div class="home-app"> {{msg}} </div> </template> <script> export default { name: 'App', data(){ return{ msg:"Welcome to 5G home" }; } } </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>
- d:输入http://localhost:8080/#/home,查看页面效果
简单写到这里,初学VUE做个总结,后续跟进项目会继续更新…,喜欢的朋友来个三连呗~
- 1)开始我们的第一个组件: