Vue.js -使用vue-cli搭建项目_vue-cli创建的项目需要引入vue.js文件吗-CSDN博客

   Vue 是一个近年来比较火的 MVVM 前端框架。我们如果想简单地使用下 Vue，只需引入一个 js 文件即可。但如果想用的好的话，还是推荐使用 vue-cli 来构建一个完整的工程。
   vue-cli 作为 Vue 的脚手架，集成了 webpack 环境及主要依赖，对于项目的搭建、打包、维护管理等都非常方便快捷。下面演示如何使用来创建项目

一、环境搭建

1.安装Node.js

主要是用来下载和安装vue-cli
下载地址：https://nodejs.org/en/
将下载下来的msi文件运行安装即可

在这里插入图片描述
在命令提示符（cmd）中运行npm -V，如果出现版本号则说明nodejs安装成功

2.安装vue-cli

运行如下命令安装：

npm install -g vue-cli

以后如果要更新vue-cli，运行如下命令

npm update vue-cli -g

测试vue-cli是否安装成功

vue -V

如果出现相应的版本号就说明成功
在这里插入图片描述

二、构建项目

1、在终端中运行 cd 命令，进入想要创建项目的目录位置

比如我们想把工程创建在 D 盘中 Code 目录下，首先在命令控制台中进入到这个文件夹，也可在目标目录直接shift+右键打开powershell窗口

2、接着执行如下命令

vue init webpack vue_demo

最后一个参数（vue_demo）是自定义的项目名称

3、上面命令执行后，会跳出几个选项让你回答。

除了第三个选项需要输入个作者外，其他选项我们直接回车，或者输入 y 回车即可
在这里插入图片描述
各选项的具体说明：

Project name：项目名称（直接回车则使用括号中默认名字）
Project description：项目描述（直接点击回车则使用默认名字）
Author：作者
Runtime + Compiler: recommended for most users：运行加编译
Runtime-only：仅运行时
Install vue-router?：是否安装 vue-route（这是官方的路由，大多数情况下都使用）
Use ESLint to lint your code?：是否使用 ESLint 管理代码（ESLint 是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。)
Pick an ESLint preset：选择一个 ESLint 预设，编写 vue 项目时的代码风格
Setup unit tests with Karma + Mocha?：是否安装单元测试
Setup e2e tests with Nightwatch?：是否安装 e2e 测试

4、构建完毕

项目创建完毕后可以看到目录下多出了一个项目文件夹 vue_demo，进入这个文件夹可以看到目录结构如下：

在这里插入图片描述

5、修改 config/index.js

将 build 属性节点下的 assetsPublicPath 该成 ‘’ （注意是 build 下的 assetsPublicPath，不要改 dev 下的了）
修改的目的是确保打包后外部引入的 js 和 css 文件路径正确，这样做好处是：

我们可以直接在本地打开并访问打包后的文件。
打包后的文件如果不是放在服务器根目录下也不会出问题。

build: {
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
  
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '',  //原来是 '/'