前端学习笔记（windows上用脚手架搭建vue项目及目录分析）

1、环境

vue -V

操作系统 ： windows 10

npm ： 6.11.3 （在dos命令窗口使用 npm -v 命令可以查看当前npm版本，如果没有安装则需要先去安装）

2、全局安装脚手架 vue-cli

npm install vue-cli -g

使用 vue -V查看是否安装成功，如果现实版本号，则表示安装成功

3、创建项目

• 语法：vue init <template-name> <project-name>
  • <template-name>：项目模板名，这里使用webpack
  • <project-name>：项目名
• 实际操作：

打开dos命令窗口，进入到自己希望项目创建的位置，然后执行命令：

vue init webpack myproject

如果不需要过多的指定配置的话，一直按回车键等待模块下载即可

模块下载的时间比较长，请耐心等待.........

 

经过漫长的等待后，如果没有保错，基本上就是搭建成功了； 如果出现了报错，为了保证后期开发不会遇到莫名其妙的问题，建议将项目删除重新构建。

4、项目目录结构

• build ：项目构建(webpack)相关代码
• config ：配置目录，包括端口号等。我们初学可以使用默认的。
• node_modules ：npm加载的项目依赖模块
• router：存放路由文件的目录
• src ：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
  • assets ：放置一些图片，如logo等。
  • components ：目录里面放了一个组件文件，可以不用。
  • App.vue ：项目入口文件，我们也可以直接将组件写在这里，而不使用components目录。
  • main.js ：项目的核心文件
• static ：静态资源目录，如图片、字体等。
• test ：初始测试目录，可删除
• .xxxx文件 ：这些是一些配置文件，包括语法配置，git配置等。
• index.html ：首页入口文件，你可以添加一些meta信息统计代码啥的。
• package.json ：项目配置文件。
• README.md ：项目的说明文档，markdown格式

 

5、下载项目依赖

dos命令窗口进入到项目根目录，执行命令：

npm install


#或


cnpm install   #前提是已安装cnpm

耐心等待下载完毕即可。