使用脚手架创建项目

117 阅读1分钟

使用vue-cli脚手架创建vue2项目

1.检查是否安装全局脚手架
安装命令: npm install -g @vue/cli
卸载命令: npm uninstall @vue/cli -g
查看版本: vue -V
2. 创建项目
创建命令:  vue create 项目名称

使用vue -cli脚手架创建vue3项目

1. 检查是否安装全局脚手架
2. 创建项目

-- npm create vue@latest

项目解释:

├── .git                        #git
|__.node_modules                #第三方包
|-- dist                           # 打包后文件夹
├── babel.config.js             # babel语法编译
├── package-lock.json 
├── public                        # 静态文件夹,这类资源将会直接被拷贝,而不会经过 webpack 的处理。
│   ├── favicon.ico
│   └── index.html                #入口页面
└── src                            # 源码目录
    ├── App.vue - 页面
    ├── assets  - 静态目录,这类引用会被 webpack 处理。
    │   └── logo.png
    ├──components 组件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件,加载公共组件
│—— vue.config.js                # 配置文件,需自行配置 
│—— .gitignore                   # git忽略上传的文件格式   
│—— babel.config.js                # babel语法编译                        
│—— package.json                    # 项目基本信息 包说明书
│—— .browserslistrc                 # 指定了项目的目标浏览器的范围 
│—— .jsconfig.json                  # 提供了大量能使我们快速便捷提高代码效率的方法。                  
|---README.md                       # 说明

打包上线 在开发完项目之后,就应该打包上线了。vue-cli 也提供了打包的命令,在项目根目录下打开命令窗口,执行命令:npm run build 执行完之后,可以看到在项目根目录下多出了一个 dist 目录,这个就是打包后的页面文件,到时候只需要将这个发给后端,让其部署上线即可。