美文网首页
如何用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