vue （vue-cli主要写构建工具的使用）

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue全家桶:vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成（这里建议使用Axios，尤大大推荐使用Axios，并且放弃了对其官方库vue-resource的维护，其有很多特性：拦截请求和响应、取消请求、转换json、客户端防御XSRF等）。

vue-cli构建工具降低了webpack的使用难度，支持热更新（webpack-dev-server），相当于启动了一个服务器（一般默认用8080端口）。

  1. 安装vue-cli
    需要node环境全局安装webpack，打开cmd（命令输入工具）
    npm install webpack -g （或者 npm install -g webpack），安装是否完成可以查看版本 webpack -v，如图

    　　　　　　　　　　　　　　　　①安装

     　　　　　　　　　　　　　　　　　②查看版本

     　　（出现版本号证明安装成功）

  2. 全局安装vue-cli,在cmd中输入命令 ：npm install --global vue-cli

　　　　打开目录盘可以看到 （我的目录盘C:\Users\EDZ\AppData\Roaming\npm）
　　　　　　　

　　　　打开node_modules还可以看到vue-cli
                          

　　　　3.使用vue-cli构建项目

　　　　　　①，新建一个项目文件夹（program）可以在你想要的盘新建，（如果不想要存C盘然后）进入到项目（program）存放地

　　　　　　

 　　　　　　输入：vue init webpack helloword

　　　　　　helloword是项目自定义名称，执行命令会生成以此名称的项目文件夹

 　　　　　　接下来会有选项：

　　　　　　（1）Project name (helloword)： -----项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, 　　　　　　　　name can no longer contain capital letters）

　　　　　　（2）Project description (A Vue.js project)： ----项目描述，也可直接点击回车，使用默认名字

　　　　　　（3）Author ()： ----作者，输入Halo（自行选择填写）

　　　　　　　　　　再选择

　　　　　　　　Runtime + Compiler: recommended for most users 运行加编译，推荐，就选它了

　　　　　　　　Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render 　　　　　　　　functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了

　　　　　　（3）Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，这里就输入“y”后回车即可。

　　　　　　（4）Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用。
　　　　　　（5）Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接y回车

　　　　　　（6）Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装y回车

　　　　　　（7）Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装y回车

　　　　　　②结合以上新建了一个新文件

　　　　　　

 　　　　　　③配置完成后，cd进入此文件夹

　　　　　　　　安装依赖      npm install

 　　　　　　　（ps：如果安装速度太慢或者下载不下来，可以使用淘宝镜像打开命令行工具，输入：
 　　　　　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org
 　　　　　　　　然后使用cnpm命令来安装）

　　　　　　　npm install：是安装所有的模块会按照项目根目录下的package.json文件中依赖的模块安装，每个使用npm管理的项目都有这个文件，是npm操作入口文件（如果是安装的具体模块，在install后面输入对应模块名字）。文件夹中多出的node_modules文件夹即所依赖的模块。

　　　　　　　　

 　　　　　　　　④启动项目 npm run dev

 　　　　　　　　默认8080端口，如果被占用可在config文件夹中修改index.js文件中port：8080 端口号
　　　　　　　　（ps:另建议将build里的assetsPublicPath）的路径前缀修改为‘./’(原本是‘/’),因为打包之后，外部引入js和css文件时，如果路径以‘/’开头，在本地是无法找到对应文件的（服务器可以）。如果在本地打开打包后文件，需修改文件路径。

　　　　4.打包上线，自己的项目文件都要放到src文件夹下。

　　　　　　npm run build 

　　　　　　打包完成后，会生成dist文件夹，项目上线直接将dist文件夹放到服务器即可。　　　

以上是 vue （vue-cli主要写构建工具的使用） 的全部内容， 来源链接： utcz.com/z/374929.html

回到顶部