vue-cli构建vue2项目

<think>我们使用vue-cli创建Vue2项目。注意：VueCLI3/4/5都可以创建Vue2项目，只需在创建时选择Vue2即可。步骤：1.确保已安装Node.js和npm（建议Node.js版本在14-18之间，避免过高版本导致兼容问题）2.全局安装VueCLI（如果已安装过@vue/cli，可以跳过，或者先卸载旧版本再安装）3.使用vuecreate命令创建项目，并选择Vue2预设4.项目创建后的结构说明5.运行项目详细步骤：1.环境准备-安装Node.js（建议版本14.x、16.x或18.x，不要使用20以上，因为Vue2的依赖可能不兼容）-验证安装：```bashnode-vnpm-v```2.全局安装VueCLI-安装最新VueCLI（注意：VueCLI4.x和5.x都支持创建Vue2项目）：```bashnpminstall-g@vue/cli```-或者安装指定版本（例如4.x）：```bashnpminstall-g@vue/cli@4```-安装完成后，验证：```bashvue--version```3.创建Vue2项目-使用以下命令创建项目：```bashvuecreatemy-vue2-project```-在提示中，选择`Manuallyselectfeatures`（手动选择特性）-通过上下箭头移动，空格键选择特性，一般我们选择：-Babel（转译ES6+代码）-Router（如果要用到路由）-Vuex（如果要用到状态管理）-CSSPre-processors（CSS预处理器，如Sass/Less）-Linter/Formatter（代码规范检查，可选）-其他按需选择-选择Vue版本：选择`2.x`-其他配置根据提示选择，例如：-是否使用history模式的路由？(Y/n)-选择CSS预处理器（Sass/SCSS/Less等）-选择代码规范配置（ESLint规则，如Standard、Prettier等）-选择何时进行代码检查（保存时检查/提交时检查）-选择如何存放配置（Indedicatedconfigfiles单独文件存放，还是package.json）-等待依赖安装完成4.项目结构说明（创建完成后）```my-vue2-project├──node_modules├──public│├──index.html#主页面入口│└──favicon.ico├──src│├──assets#静态资源│├──components#组件│├──router#路由（如果选择了安装VueRouter）│├──store#Vuex状态管理（如果选择了安装Vuex）│├──views#页面视图组件│├──App.vue#根组件│└──main.js#入口文件├──.browserslistrc#浏览器兼容配置├──.eslintrc.js#ESLint配置（如果选择了）├──.gitignore#Git忽略文件配置├──babel.config.js#Babel配置├──package.json#项目配置和依赖└──README.md```5.运行项目-进入项目目录：```bashcdmy-vue2-project```-启动开发服务器：```bashnpmrunserve```-打包生产环境代码：```bashnpmrunbuild```6.可选：添加其他依赖-例如安装axios：```bashnpminstallaxios```7.注意：如果创建项目时没有选择路由或Vuex，可以后续手动安装-安装VueRouter（版本3，因为Vue2对应的是VueRouter3）：```bashnpminstallvue-router@3```-安装Vuex（版本3）：```bashnpminstallvuex@3```8.配置参考（以手动添加路由为例）-在src下创建router/index.js：```javascriptimportVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import('../views/About.vue')}]constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})exportdefaultrouter```-在main.js中引入router：```javascriptimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'newVue({router,render:h=>h(App)}).$mount('#app')```9.使用Vuex（手动安装后）-创建src/store/index.js：```javascriptimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{count:0},mutations:{increment(state){state.count++}},actions:{increment(context){context.commit('increment')}}})```-在main.js中引入store：```javascriptimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'newVue({router,store,render:h=>h(App)}).$mount('#app')```10.项目配置调整-可以通过修改vue.config.js（如果没有，在项目根目录创建）来覆盖默认配置，例如：```javascriptmodule.exports={devServer:{port:8081,//修改端口open:true//自动打开浏览器},//其他配置...}```至此，一个基于Vue2的项目就创建和配置完成了。注意事项：-Vue2项目应使用VueCLI4.x或5.x创建，不要使用VueCLI3以下版本。-选择依赖时注意版本：Vue2对应VueRouter3和Vuex3，不要使用最新版本（最新版本是Vue3的）。-如果遇到依赖安装问题，可以尝试使用淘宝镜像（cnpm）或yarn。引用说明：-创建项目步骤参考了vue-cli的官方文档[^4]。-项目结构说明参考了引用[3]。-使用`vuecreate`命令创建项目并手动选择特性参考了引用[5]。§§相关问题§§1.如何在现有Vue2项目中升级到Vue3？2.VueCLI创建的项目中，如何配置Webpack？3.Vue2项目中如何实现按需加载路由组件？4.如何解决Vue2和VueRouter3的常见路由问题？</think>### 使用 Vue CLI 创建 Vue 2 项目完整指南 #### 1. 环境准备 [^2] ```bash # 安装 Node.js (建议 14.x-18.x) node -v # 验证版本 npm -v # 验证 npm # 全局安装 Vue CLI npm install -g @vue/[email protected] # Vue 2 兼容版本 vue --version # 应显示 4.x ``` #### 2. 创建项目 [^4][^5] ```bash # 创建项目 vue create my-vue2-project # 交互式配置选择： ? Please pick a preset: Default ([Vue 2] babel, eslint) # 选择 Vue 2 预设 Manually select features # 或手动选择 # 手动选择功能（按空格键选择/取消）： ◉ Babel ◯ TypeScript ◉ Router # 需要路由则选择 ◉ Vuex # 需要状态管理则选择 ◉ CSS Pre-processors ◉ Linter / Formatter ◯ Unit Testing ◯ E2E Testing # 选择 Vue 版本： ? Choose a version of Vue.js that you want to start the project with 3.x ❯ 2.x # 选择 Vue 2 # 路由模式： ? Use history mode for router? (Y/n) # 输入 Y 使用 history 模式 # CSS 预处理器： ? Pick a CSS pre-processor ❯ Sass/SCSS (with dart-sass) Less Stylus # ESLint 配置： ? Pick a linter / formatter config: ❯ ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier # 选择保存时机： ? When do you want to run lint? ❯ Lint on save # 保存时检查 Lint and fix on commit # 配置存放位置： ? Where do you prefer placing config for...? ❯ In dedicated config files # 推荐单独配置文件 [^5] In package.json ``` #### 3. 项目结构解析 [^3] ``` my-vue2-project/ ├── public/ # 静态资源 │ ├── index.html # 主入口 HTML │ └── favicon.ico ├── src/ # 核心代码 │ ├── assets/ # 图片等静态资源 │ ├── components/ # 通用组件 │ ├── views/ # 页面组件 │ ├── router/ # 路由配置 │ │ └── index.js │ ├── store/ # Vuex 状态管理 │ │ └── index.js │ ├── App.vue # 根组件 │ └── main.js # 入口文件 ├── .eslintrc.js # ESLint 配置 ├── babel.config.js # Babel 配置 ├── package.json # 项目配置 └── vue.config.js # Webpack 自定义配置 ``` #### 4. 核心文件说明 **`src/main.js` (入口文件)**: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` **`src/App.vue` (根组件)**: ```vue <template> <div id="app"> <router-view/> <!-- 路由出口 --> </div> </template> <script> export default { name: 'App' } </script> ``` **`src/router/index.js` (路由配置)**: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: () => import('../views/About.vue') // 路由懒加载 } ] const router = new VueRouter({ mode: 'history', // 使用 history 模式 base: process.env.BASE_URL, routes }) export default router ``` #### 5. 运行与构建 [^1] ```json // package.json "scripts": { "serve": "vue-cli-service serve", // 开发模式 "build": "vue-cli-service build", // 生产构建 "lint": "vue-cli-service lint" // 代码检查 } ``` 运行命令： ```bash npm run serve # 启动开发服务器 (http://localhost:8080) npm run build # 构建生产包 (输出到 dist/) npm run lint # 代码规范检查 ``` #### 6. 自定义配置 在 `vue.config.js` 中添加： ```javascript module.exports = { devServer: { port: 3000, // 修改端口 open: true // 自动打开浏览器 }, css: { loaderOptions: { scss: { prependData: `@import "~@/assets/styles/variables.scss";` // 全局 SCSS 变量 } } } } ``` #### 7. 添加常用库 ```bash # 安装 axios 和 element-ui npm install axios [email protected] # Vue 2 兼容版本 # 在 main.js 中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) import axios from 'axios' Vue.prototype.$http = axios ``` #### 注意事项 [^2][^4] 1. **版本兼容**： - Vue CLI 需使用 4.x 版本 - Vue Router 使用 3.x - Vuex 使用 3.x 2. **Vue 2 特性**： - 使用 `new Vue()` 构造函数 - 选项式 API (Options API) - 不支持 Composition API (需额外安装 `@vue/composition-api`) 3. **开发效率**： - 热重载默认启用 - 可通过 `.env` 文件管理环境变量 - 使用 `vue.config.js` 自定义 Webpack 配置 --- ### 常见问题解决 1. **安装失败**： ```bash # 清除 npm 缓存 npm cache clean --force # 使用淘宝镜像 npm config set registry https://registry.npmmirror.com ``` 2. **ESLint 报错**： 修改 `.eslintrc.js`： ```javascript module.exports = { rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } } ``` ---