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(项目名称)


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

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

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

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

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

增加代码：

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

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

版权声明：本文为OrgCheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/OrgCheng/p/11753925.html