vue-cli

vue-cli是vue开发的脚手架

安装

• 首先看看是否已经安装过了

npm list -g vue-cli

• 如果已经安装了低版本的话，卸载

npm uninstall vue-cli -g

• 全局安装

npm install -g @vue/cli

• 安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。（例如 vue --version）

注意

• vue-cli2和vue-cli3的模块名字不一样。vue-cli3有了scope了。scope说明

创建项目

• 执行以下命令创建

vue create hello-world

image.png

• 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性

• 上面的配置选择完之后，一个简单的vue项目就创建成功了。这个时候你在命令行cd hello-world，进入到hello-world项目根路径下，命令行敲下npm run serve，项目就开始跑起来啦

• 也可以使用ui方式创建项目

vue ui

image.png

目录层次

image.png

• public目录放置ico以及你的index.html
• assets目录：放置静态文件，例如：图片，js，svg的js等等啊，这个目录下的文件在生产环境下会被webpack copy
• components目录：放置公用vue组件页面
• views目录：登录页，首页，注册页等等。
• vue.config.js
  端独立开发有个跨域问题，之前vue-cli2的proxy-table等配置在vue-cli3中这里配置。

// vue.config.js
module.exports = {
    // 选项...
    baseUrl:"./",
    outputDir:"dist",
    assetsDir:"assets",
    indexPath:"index.html",
    filenameHashing:true,
    pages:undefined,
    lintOnSave:true,
    runtimeCompiler:false,
    transpileDependencies:[],
    productionSourceMap:false,
    crossorigin:undefined,
    integrity:false,
    devServer:{//代理
        port:8086,
        proxy:'http://192.168.255.201:8082'
    }
}