目录
1.下载Vscode
略
2.搭建Node.js环境
搭建node.js环境在http://nodejs.cn/download/下载对应版本，无脑下一步即可完成安装。This package has installed:
Node.js v18.14.0 to /usr/local/bin/node
npm v9.3.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.
打开终端，千万注意要以管理员身份运行：输入sudo – i。然后输入本机密码，输入node -v如果正确显示版本号，安装完成。
3.使用淘宝NPM镜像
语法：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org。
永久更改使用指定淘宝镜像：npm config set registry https://registry.npm.taobao.org。
查看镜像源：npm config get registry。
输入cnpm -v即可查看对应版本号。
node -v
npm -v4.安装vue脚手架构建工具
# 安装vue2.X
npm install vue-cli -g
# 安装vue3.X
npm install -g @vue/cli在zsh输入sudo npm install -g @vue/cli。
输入vue --version或vue -V查看脚手架版本。
Vue脚手架的更多操作：
which vue
where vue
cd /usr/local/bin
sudo rm -rf vue
vue -V
vue --version5.创建一个基于webpack模版的项目
# 进入你的项目目录
cd workspace
vue init 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 回车；
- 安装依赖：
# 进入项目
cd testPlatformWeb
cnpm i依赖安装完成后，项目会增加node_modules文件夹，启动npm run dev。
进入目录，运行npm run dev，在浏览器中输入http://localhost:8080地址，就可以访问本地服务页面了，如下图所示：
6.Vue-cli工程中每个文件夹和文件的用处
- dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署
- node_modules：存放npm命令下载的开发环境和生产环境的依赖包
- public：有的叫assets：存放项目中需要用到的资源文件，css、js、images以及index
- src文件夹：存放项目源码及需要引用的资源文件
- src-api文件夹：放ajax相关操作的代码文件:index.js(相关的接口),ajax.js(封装的axios,拦截器)。有的叫service：自己配置的vue请求后台接口方法
- src-common文件夹：stylus的混合文件.styl，不要写到public也可以
- src-components文件夹：存放vue开发中抽离的一些公共组件
- src-mock文件夹：mock数据存放文件及mock模拟接口（没有后台接口或接口不完整情况下可以模拟后台接口）
- src-pages文件夹：涉及到路由的组件
- src-router文件夹：vue-router，路由器及路由的配置
- src-store文件夹：存放 vue中的状态数据，用vuex集中管理
- App.vue文件：使用标签渲染整个工程的.vue组件
- main.js文件：vue-cli工程的入口文件
- package.json文件：用于node_modules资源部和启动、打包项目的npm命令管理
- build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅偶尔使用到此文件夹
- webpack.base.conf.js用于配置 less、sass等css预编译库，或者配置一下 UI 库
- config文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同，常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载或者设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build命令打包生成静态资源的名称和路径等
7.文件说明
-
build：构建脚本目录- build.js ==> 生产环境构建脚本；
- check-versions.js ==> 检查npm,node.js版本；
- utils.js ==> 构建相关工具方法；
- webpack.base.conf.js ==> webpack基本配置；
- webpack.dev.conf.js ==> webpack开发环境配置；
- webpack.prod.conf.js ==> webpack生产环境配置；
config：项目配置- dev.env.js ==> 开发环境变量；
- index.js ==> 项目配置文件；
- prod.env.js ==> 生产环境变量；
node_modules：npm加载的项目依赖模块。src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：- assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
- components：组件目录，我们写的组件就放在这个目录里面；
- router：前端路由，我们需要配置的路由路径写在index.js里面；
- App.vue：根组件；
- main.js：入口js文件；
- static：静态资源目录，如图片、字体等。不会被webpack构建
- index.html：首页入口文件，可以添加一些 meta 信息等
- package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
- README.md：项目的说明文档，markdown 格式
- .xxxx文件：这些是一些配置文件，包括语法配置，git配置等
8.创建Vue项目
在components目录下新建一个views目录，里面写我们的vue组件。
开始第一个组件：
1）在views目录下新建First.vue
2）在router目录下的index.js里面配置路由路径
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import First from '@/components/views/First'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/first',
name: 'First',
component: First
}
]
})First.vue：
<template>
<div class="first-app">
{{ msg }}
</div>
</template>
<script>
export default {
name: "First",
data() {
return {
msg: "Welcome to your firstApp"
};
}
};
</script>
<style scoped>
</style>在本地浏览器输入：http://localhost:8080/#/First
启动：
