vue-cli3.0脚手架使用

向右看齐 2022-02-23 13:27 228阅读 0赞

一、准备

安装node

①选择对应系

统进行下载,下载完成直接安装即可

http://nodejs.cn/download/

  1. //输入一下命令,成功输入版本即为安装成功
  2. node -v

安装vue-cli3

1.首先看看自己的版本

2019040812280686.png

2.不是3.xx就把它卸载

20190408123014159.png

3.安装vue-cli3

npm install -g @vue/cli

20190408123113308.png

4.很遗憾,由于npm服务器在国外,下载东西很慢,慢到失败。。。

由此我们可以使用它们cnpm来安装,输入

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

2019040812343115.png

5.查看是否安装成功

20190408123503576.png

6.OK,再来安装vue-cli3,输入 cnpm install -g @vue/cli

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70

6.安装成功,检测一下

20190408123656681.png

二、建项目

1.vue create projectName ( 文件名 不支持驼峰(含大写字母)

下面的问题是:是否使用淘宝镜像的方式代替npm安装这些项目,是

20190408123903188.png

有点尴尬的地方是,我在government位置下创建的项目,于是

20190408124205421.png

2.

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 2

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 3

3.模板创建完成,然后下载完成

20190408124719501.png

4.需要对webpack进行配置的话,要手动在根目录下新建一个vue.config.js文件

  1. module.exports = {
  2. // 基本路路径, vue.cli 3.3以前请使⽤用baseUrl
  3. publicPath: '/', // 默认'/',部署应用包时的基本 URL
  4. outputDir: 'dist', // 'dist', 生产环境构建文件的目录
  5. assetsDir: '', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  6. lintOnSave: false,
  7. runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  8. productionSourceMap: true, // 生产环境的 source map
  9. devServer: {
  10. port: 8080,
  11. proxy: {
  12. '/government': {
  13. target: 'http://http://192.168.3.109:8088/',
  14. changeOrigin: true,
  15. pathRewrite: {
  16. '^government': 'government'
  17. }
  18. }
  19. }
  20. }
  21. }

5.然后再运行npm run serve即可

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 4

发表评论

表情:
评论列表 (有 0 条评论,228人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vueCli pwa模式增加

    vue-cli2X或者vue-cli3X 文档见[官网][Link 1] 我们不用配置就可以跑起来,但是配置里面有些地方需要注意的而且不能乱改,自行看文档。配置常用的是

    相关 vue脚手架基本使用

    首先在大前提vue-cli已经安装好的情况下,并且cnpm install后(官网使用的是npm,但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象),这里有个小