vue从入门到精通：轻松搭建第一个vue项目
目录
Vue是什么
一、nodejs安装
二、安装Vue CLI
三、创建Vue项目
四、配置vue.config.js文件
五、创建第一个应用hello word
Vue是什么
Vue是一款用于构建用户界面的 JavaScript 渐进式架构既可作为库（仅关注视图层）也可扩展为框架，支持从静态页面到复杂单页应用（SPA）的渐进式开发。并提供了一套声明式的、组件化的编程模型，可以实现数据双向绑定，自动同步数据与视图，无需手动更新dom。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
一、nodejs安装
安装步骤参考《nodejs安装步骤》
二、安装Vue CLI
打开终端或命令提示符，使用npm（Node.js的包管理器）来全局安装Vue CLI：
npm install -g @vue/cli
验证Vue CLI版本：
在命令行中输入：vue --version 或者 @vue/cli --version
如果可以正确输出版本号，说明vue-cli框架安装成功
三、创建Vue项目
安装完Vue CLI后，你可以使用以下命令来创建一个新的Vue项目：
例如，如果你想创建一个名为vue-element-app的项目，你可以运行：
vue create vue-element-app
1、在创建过程中，Vue会询问你一些配置选项，你可以根据自己的需要选择。
2、进入项目目录：
cd vue-element-app
3、运行项目：npm run serve
在浏览器中输入http://localhost:8080访问项目，运行效果如下。
4、现在你可以开始开发你的Vue应用了。所有的组件和页面都可以放在src目录下。例如，你可以在src/components目录下创建新的Vue组件。Vue项目目录如下
src：项目总目录
Components: 放置各种组件的地方
Vue.config.js：配置文件，比如webpack,端口设置，接口地址设置，详细配置请查看vue 的config配置文章。
Assets：放置css\js\image等静态文件
Public：项目入口文件
四、配置vue.config.js文件
通过修改 vue.config.js 文件来调整开发服务器、构建设置、代理、webpack 配置等。这个文件位于项目的根目录下。
// 配置 publicPath，用于设置部署应用包时的基本 URL。默认情况下是 '/'，可以根据部署需求修改。
publicPath: '/app/',
// 配置输出目录
outputDir: 'dist', // 默认值是 'dist'
// 设置静态资源目录
assetsDir: 'static', // 默认值是 'static'
// 设置构建时的生产环境 source map
productionSourceMap: false, // 在生产环境下禁用 source map（提高构建速度）
// 开发服务器的配置项，常用来配置端口、代理、热更新等。
devServer: {
port: 8080, // 设置端口号
open: true, // 启动时自动打开浏览器
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理目标
changeOrigin: true, // 是否改变请求头中的 origin
pathRewrite: { '^/api': '' }, // 重写路径
},
},
},
// 修改 webpack 配置
可以通过 configureWebpack 或者 chainWebpack 来修改 Webpack 配置
chainWebpack是 configureWebpack 的增强版，提供更细粒度的控制，通过链式 API 修改 Webpack 配置。
configureWebpack: {
resolve: {
alias: {
'@': '/src', // 自定义别名
},
},
},
或者
chainWebpack: config => {
config.resolve.alias
.set('@components', '/src/components') // 自定义别名
.set('@assets', '/src/assets');
},
CSS 配置
css: {
// 是否启用 CSS 分离
extract: true,
// 传递给 CSS 预处理器的配置，用于向 css-loader、sass-loader 等 CSS 相关的 loader 传递配置。
loaderOptions: {
sass: {
additionalData: `@import "~@/styles/variables.scss";`, // 引入全局 Sass 变量
},
},
},
// 环境变量的配置
你还可以根据不同的环境（开发、生产等）来配置不同的设置。例如：
publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : '/',
// 其他常用配置
lintOnSave: 控制是否开启 ESLint 检查。
transpileDependencies: 用于配置哪些依赖需要被 Babel 转译。
runtimeCompiler: 启用运行时模板编译（对于大型项目可能会有所帮助）。
五、创建第一个应用hello word
App.vue文件中会自动生成一个新的应用实例
