vue-cli3 搭建 vue 项目

vue-cli3 搭建 vue 项目

项目是在mac的环境下配置的 win的同学请移步【https://www.cnblogs.com/zhaomeizi/p/8483597.html】

• 安装 node.js
  
       1. 首先是打开node官网【https://nodejs.org/en/#download】 下载LTS版本，一路傻瓜式安装。
  
       2. 打开Mac下的终端输入：node -v 会出现版本号就说明成功了。

• 安装 npm
  
       1. 首先获取 node 的安装模块的权限

sudo chmod -R 777 /usr/local/lib/node_modules/

     2. 然后安装 npm 淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

     3. 检测是否安装 npm 成功

npm -v

• 安装 webpack (全局安装)

npm install webpack -g

     如果安装卡住了，或者安装不上，可以尝试

cnpm install webpack -g

• 安装 vue 手脚架（全局安装，比如 vue 模板等）

npm install vue-cli -g

• 创建 vue 项目
  
       1. 创建文件目录并 cd 到对应的文件夹下

vue create projectName(项目名称)

     2. 可以选择自动的配置，也可以选择手动的配置，这里我选择的是自动配置，出现如下图表示项目创建成功啦。

     3. 项目创建好之后可以运行查看项目，出现正常的界面后说明项目创建成功了。

     4. 项目编写完成我们需要将其打包，直接  npm run build  就可以了，对应目录下增加了  dist  文件夹和内容。

     5. 这里我们会遇到一个问题，直接打开 index.html 是一个空白的页面，这我们需要增加一些配置。

     打开项目增加vue.config.js文件  cli3搭建项目不会创建这个文件，需要手动创建

增加代码：

module.exports = {
    publicPath: './'
}

     6. 重新进行build就有页面展示了，这样我们就完成了vue项目的创建和打包。