Vue框架入门-新建VueCli项目

vue官网
https://cn.vuejs.org/

Vue框架使用

安装脚手架
执行命令
npm install vue @vue/cli -g
对vue和vue cli进行全局下载

由于我的C盘资源比较有限，看到使用npm下载的时候，免不了替我的C盘捏一把汗，所以现在命令行通过

npm list -global
npm root -g

看了以下，全局安装的安装路径。

果然在C盘，所以需要小小修改一下这个安装路径，给C盘减负。

第一步
在在nodejs安装目录（也可以指定其它目录）下创建”node_gobal”和”node_cache”两个文件夹

第二步
打开cmd命令行，设置全局模块的安装路径到node_gobal文件夹，缓存到node_cache文件夹，在命令行输入：

npm config set prefix "F:\NodeJS\node_global"
npm config set cache "F:\NodeJS\node_cache"

这时候再输入npm root -g就可以看到位置已经移动到F盘了。

第三步
由于node全局模块大多数都是可以通过命令行访问的，所以还要把“F:\NodeJS\node_global”加入到系统PATH中，方便直接使用命令行运行。

也在系统变量里新加入一条NODE_PATH，值为"F:\NodeJS\node_global\node_modules"。

设置好以后，就可以使用命令行下载了
下载后，输入vue -V验证

3.vue创建项目

1.命令行到项目路径下

2.创建项目

vue create 项目名

3.选择项目配置

default是默认配置
Manually select features是自定义配置
通过上下按键选择自定义配置；通过回车确定

通过上下键移动，通过空格选择。
Babel：一般选择，Vue是基于最新的JS语法JS6，这个语法一般只有goolge、火狐、Safira浏览器支持，而360这样基于IE的是不支持的，Babel就是将JS6翻译成老版本的。
TypeScript：
PWA：
Router：选
Vuex：
CSS Pre：
Linter/Fomater：选

选n

选择一个格式化的配置

save

单独的文件

是否保存这个模板
那这里先选n

开始安装

4.创建成功

创建成功
执行下列命令

打开浏览器，输入http:localhost:8080/

项目创建成功

构建项目
npm run build

5.认识Vue目录结构

初始建立vue项目后，可以看到Vue的目录结构如下：

1. node_modules
   npm加载的项目依赖模块
2. public
   基本文件，包含页面、图像、小图标
3. src
   项目主场
   • assets：静态资源文件
   • compontents：自定义的组件
   • plugins
   • router：路由文件
   • store：状态管理器，应用级数据
   • views：页面组件
   • App.vue：入口页面结构
   • main.js：入口文件
4. babel.config.js
   babel配置文件
5. package.json
   项目基本信息及项目依赖关系
6. package-lock.json
   记录下当先状态下实际安装的各个npm package的具体来源和版本号
7. README.md
   项目说明文档
8. vue.config.js
   项目配置文件

[1]修改npm全局安装模式的路径 https://www.cnblogs.com/Jimc/p/10194431.html
[2]npm安装教程 https://www.cnblogs.com/goldlong/p/8027997.html