装置vue-cli

一、须要全局装置webpack

npm install -g webpack  //装置胜利后输出`webpack -v`呈现版本号npm install webpack webpack-cli -g  //装置 webpack-cli 依赖

运行我的项目时报错: 'webpack' 不是外部或外部命令,也不是可运行的程序。
报这个错是因为没有全局装置webpack，解决办法:
1.确保nodeJS已装置。
2.找到nodejs目录,我的目录是图片上这个,你的可能不一样,看下有没有以下两个文件,没有就新建。

3.批改全局门路,须要把默认的安装包门路改成nodejs外面这两个新建的文件

配置全局门路：npm config set prefix “D:\soft\nodejs\node_global”
配置缓存门路：npm config set cache “D:\soft\nodejs\node_cache”

留神: 这里的门路是你刚刚新建的文件的门路,你能够在文件处右击-->复制以后门路

4.批改零碎的环境变量

桌面--> 我的电脑 --> 右击 属性 --> 高级零碎设置 --> 环境变量(或者间接关上控制面板)

留神: 装置之后如果没敞开运行窗口,间接webpack-v,还是会报'webpack'不是外部或外部命令......,肯定要把运行窗口敞开后,从新关上运行,我的项目中也是,先把运行窗口敞开在应用webpack的命令.我装置的时候没敞开窗口,后果始终报错,我删了装置了好几遍,坑。

5.webpack -v 查看时，会提醒必须要装置webpack-cli，依据提醒执行y即可持续装置，也能够执行命令npm install webpack-cli -g，来装置。我是用持续y来装置的，如图：

装置的时候可能有一些warn正告,不影响,只有装置好包就能够。
二、全局装置vue-cli

npm install --global vue-cli  //装置实现之后输出 `vue -V`呈现相应的版本

三、应用vue-cli来创立一个基于 webpack 模板的新我的项目
1.创立：cmd利用cd /d E:\2021-5-4指令进入到保留我的项目的文件夹下，而后输出命令：vue init webpack


输出命令后，选项阐明：

1. ? Project name todo_list： 项目名称，间接回车，依照括号中默认名字（留神这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）2. ? Project description A Vue.js project： 我的项目形容，也可间接点击回车，应用默认名字3. ? Author galen galen@git.xgqq.com： 作者，输出你的小名4. ? Vue build standalone：5. ? Install vue-router? Yes： 是否装置vue-router，这是官网的路由，大多数状况下都应用，这里就输出“y”后回车即可。6. ? Use ESLint to lint your code? Yes： 是否应用ESLint治理代码，ESLint是个代码格调管理工具，是用来对立代码格调的，个别我的项目中都会应用。7. ? Pick an ESLint preset Standard： 接下来也是选择题Pick an ESLint preset (Use arrow keys) 抉择一个ESLint预设，编写vue我的项目时的代码格调，间接y回车8. ? Set up unit tests Yes： 是否装置单元测试，我抉择装置y回车9. ? Pick a test runner jest10. ? Setup e2e tests with Nightwatch? Yes： 是否装置e2e测试 ，我抉择装置y回车11. ? Should we run npm install for you after the project has been created? (recommended) npm：

2.装置我的项目所须要的依赖：进入新建的我的项目文件夹下，就是上头有一些文件的外面，输出命令：

cnpm install//目录中`node_modules`文件夹，放所有依赖的模块。

四、解释一下每个文件夹
build //构建脚步目录，保留一些webpack的初始化配置
config //构建配置目录，我的项目初始化的配置，包含端口号等
node_modules //npm加载的我的项目依赖的模块
src //源码目录，这里是咱们要开发的目录，基本上要做的事件都在这个目录里

  • assets //资源目录，用来搁置图片，如logo等
  • components //组件目录，用来放组件文件
  • router //
  • app.vue //是我的项目入口文件
  • main.js //是我的项目的外围文件
    static //文件夹用来搁置动态资源目录，如图片、字体等。
    test //初始测试目录，可删除
    .babelrc babel //编译参数，vue开发须要babel编译
    .gitignore //用来过滤一些版本控制的文件，比方node_modules文件夹
    index.html //是首页入口文件，你能够增加一些 meta 信息或统计代码啥。
    package.json //是我的项目配置文件，记录着一些命令和依赖还有简要的我的项目形容信息
    README.md //我的项目的阐明文档，markdown 格局，介绍本人这个我的项目的

五、启动我的项目
npm run dev

如果浏览器关上之后，没有加载出页面，有可能是本地的 8080 端口被占用，须要批改一下配置文件 config里的index.js