本文主要介绍了Vue的安装和环境配置、新的Vue项目，并简要介绍了Vue开发工具和项目结构。 前言1、node.js安装与配置1、下载安装node.js2、默认安装目录与缓存日志目录配置3、node.js环境配置4、淘宝镜像源2、安装vue与脚手架安装脚手架vue-CLI2.x4 vue-cli 3.x1安装、卸载旧版本2、安装新版本3、新建项目4、运行项目5、cli3下拉列表2.x tens
前言构建vue前端框架的环境
一、node.js安装与配置1 .下载安装node.js官网下载最新版本： https://nodejs.org/en/download/
可以下载安装包。 有关安装教程，请参见https://www.run OOB.com/nodejs/nodejs-install-setup.html。 ）
下载或zip文件，找到并保存目录，解压缩下载的文件，然后放置环境变量，并将解压缩文件所在的路径放置在环境变量中。
默认情况下，Node.js安装了npm，因此您可以在全局命令中使用npm命令来测试cmd是否成功安装，而无需进行其他配置。 分别输入node -v和npm -v以验证版本信息
2 .默认安装目录和缓存日志目录配置说明：此处的环境配置主要配置包含全局npm安装模块的路径和缓存缓存缓存cache的路径。 这意味着以后npm install express [-g] (后面的可选参数-g，g是全局安装。)在执行类似的安装语句时，安装的模块是【c 333333】 当然，如果不介意的话，可以省略这个设定
1、创建默认的安装目录和缓存日志目录
例如，如果要将包含所有模块的路径和缓存路径放入安装了我的node.js的文件夹中，请在我安装的文件夹【' D:Program Files nodejs】下放置两个文件夹
2、运行命令，将npm全局模块目录和缓存目录置于刚才创建的两个目录中。
npmconfigsetprefix ' d :program filesnodejsnode _ global ' npmconfigsetcache ' d :program filesnodejs
npm配置获取缓存显示npm软件包缓存路径
也可以通过输入npm list -global命令来显示全局安装目录。
npm配置列表显示所有npm配置
3. node.js环境部署说明：请记住以下D:Program Filesnodejs是我的node安装路径，更改为你们自己的路径
选择“我的电脑”右键单击“属性”“高级系统设置”“高级环境变量”以访问“环境变量”对话框
1、在【系统变量】下新建【NODE_PATH】并输入
【d :program filesnodejsnode _ globalnode _ modules】
2、在【系统变量】下的【Path】中添加节点路径【D:Program Filesnodejs】
3、添加【用户变量】下的【Path】
【d 3360program filesnodejsnode _ global】，【d :program filesnodejsnode _ cache】这是nodejs的默认设置
4 .配置淘宝镜像源查看npm下载源npm配置注册表
您可以将npm的模块下载仓库从默认的海外站点更改为国内站点，从而使模块下载速度相对较快。 目前，全部使用淘宝镜像源(https://registry.npm.taobao.org )。 有两种方法可以使用淘宝镜像源。
)1)临时使用
NPM-- registry https://registry.NPM.Taobao.orginstallcluster代码仅在安装集群时使用淘宝镜像下载，仅安装一个模块
)2)永久使用
这里还有两个配置选项：直接修改npm命令的仓库地址以使其成为淘宝镜像源，或者安装cnpm命令。
第一个：直接更改npm的默认配置
npmconfigsetregistry https://registry.NPM.Taobao.org验证：配置后可以基于NPM配置获取registr
y或 npm config list 命令查看npm下载源是否配置成功，如图所示配置前为"https://registry.npmjs.org/"配置后为淘宝镜像，表示配置成功
第二种：安装cnpm
验证方式变成了cnpm config get registry 或 cnpm config list如图所示
二、安装vue及脚手架 1.安装vue.js
npm install vue -g或者cnpm install vue -g
根据自己的淘宝镜像源设置选择命令，其中-g是全局安装，指安装到global全局目录去
查看安装的vue信息：npm info vue 或者cnpm info vue
查看安装的vue版本npm list vue
在命令行中运行命令 npm install webpack -g ，然后等待安装完成。
webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli，
安装成功后可使用webpack -v查看版本号。
用这个命令来检查其版本是否正确：vue --version或vue -V
这里顺手安装上vue-router
npm install -g vue-router可以看到我的安装目录如下
1、创建项目（最好在cd到D盘的某个位置，即项目的路径，否则项目会新建在C:UsersAdministrator，也可以直接在想要的项目路径下输入cmd）
vue init webpack 项目名项目名不要取中文和大写字母。
进行一些配置：
Project name（工程名）:回车(含大写字母给我报错了，我给改了my-vue)Project description（工程介绍）：回车Author：作者名 ：回车Vue build ==> （是否安装编译器）runtime-compiler、 runtime-only 都是打包方式，第二个效率更高；Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到路由，所以Y 回车；Use ESLint to lint your code ==> 是否需要ESLint检测代码，目前我们不需要所以 n 回车；Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；Setup e2e tests with Nightwatch ==>是否需要端到端测试工具目前我们不需要所以n回车；Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)==> 安装依赖npm install回车；
此处省略了一部分截图
最后结果如下，项目初始化成功
2、按提示代码进入到项目目录下并运行npm run dev
按提示打开地址http://localhost:8081， 打开网址如图所示
结束项目运行：ctrl+c，选择Y即可停止项目的运行。
三、安装vue-cli 3.x 1、卸载旧版本
卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g
npm install @vue/cli –g
指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本
vue create 项目名
Please pick a preset=》选择一个配置:default默认有babel、eslint，Manually select features 手动配置。选择手动配置，根据自己的需要选择，敲空格键配合方向键进行选择。where do you prefer placing config for …=》配置放在哪里
In dedicated config files =》 每项配置有单独的文件
In package.json =》在package.json 文件中Save this as a preset for future project? =>是否为保存配置习惯文件，存了后下次新建新项目选择配置时就会有此选项了Save preset as; =>存个名字Pick the package …=>运行选择npm或者yarn
配置成功
4、运行项目cd 到我们的项目目录， 然后使用npm run serve可以运行我们的项目
http://localhost:8080/ 打开就可以看到我们的运行的结果了，如图
依然可以新建2.x的项目 vue init webpack my-vue
四、开发工具 1、用VS查看vue代码最好使用编码工具查看编写代码，我用的vs code ，安装见https://blog.csdn.net/dream_summer/article/details/108872293，下面讲如何使用Visual Studio Code查看vue代码
1、在VS code 中启动项目
创建完项目后，首先用VS打开项目所在的文件夹，点击工具栏的终端——新建终端，在下面的终端窗口命令行输入 npm run serve启动，编译成功后会自动打开浏览器
项目中新建vue.config.js 文件，更改端口号为8089
module.exports={//扩展配置 configureWebpack:{ devServer:{ port:8089,//更改端口号 open:true,//自动启动浏览器 //mock数据 before(app){ } } }}保存后，在终端启动，端口号变为8089并自动打开了浏览器http://localhost:8089
如图
安装
从HbuildX官网（http://www.dcloud.io/hbuilderx.html）下载hbuildx安装文件（已提供，无需下载），下载后，直接解压就可以使用。
新建VUE项目
Node配置（配置运行许可）
选中新建的项目点击工具栏运行-运行到终端-运行设置
填写最下面的npm、node运行配置，如下图：
运行工程
选中工程，点击右键-外部命令
1、npm run build 编译该工程
2、npm run serve 启动该工程
启动成功之后，打开路径看到如下界面说明成功。
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 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等。 这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
1）.babelrc:babel编译参数
2）.editorconfig:编辑器相关的配置，代码格式
3）.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
4）.eslintrc.js : 配置代码格式风格检查规则
5）.gitignore:git上传需要忽略的文件配置
6）.postcssrc.js ：css转换工具