美文网首页
如何用vue官方脚手架搭建项目

如何用vue官方脚手架搭建项目

作者: Gino_Li | 来源:发表于2019-04-23 22:53 被阅读0次

1.全局安装vue脚手架

npm install -g @vue/cli

检查vue-cli的版本

vue --version

如果有版本号则说明已经安装成功.

2.用vue-cli创建项目

//方法一
vue create project_name
    project_name表示你创建的项目名称

//方法二
vue ui

注意:项目名称不能用大写,单词之间也不要用句号拼接.

3.启动项目

首先进入项目根目录
```
cd project_name
```
启动命令
```
npm run serve
```

4.在浏览器上运行项目

在浏览器地址栏中输入
localhost:8080

如需运行命令后自动打开浏览器,需要在package.json中进行配置,找到如下属性

//源代码
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
//修改后
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  },

再次运行npm run serve即可自动打开网页

5.项目打包

```
npm run build
```

6.打包项目前需需要通过vue.config.js文件来要配置项目的基础路径

> 1)在项目根目录下创建vue.config.js文件
  2)进行如下配置
    ```js
    module.exports={
        publicPath:'./'
    }

    publicPath:用于配置项目根目录,默认值为:'/'
    ```

相关文章

网友评论

      本文标题:如何用vue官方脚手架搭建项目

      本文链接:https://www.haomeiwen.com/subject/jtsigqtx.html