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

骑猪看日落 2023-05-29 02:52 16阅读 0赞

# 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、项目目录结构 #

![20191101205719335.png][]

*  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

耐心等待下载完毕即可。

[20191101205719335.png]: https://img-blog.csdnimg.cn/20191101205719335.png