2023年6月21日发(作者：)

从零0开始完整搭建⼀个VUE项⽬⼀、安装node环境2、检查是否安装成功：node -v 如果输出版本号，说明我们安装node环境成功。npm包管理器是集成在中了，所以在安装的时候就已经⾃带了npm。输⼊npm -v可得到npm的版本。 检查是否安装成功：cnpm -v ⼆、搭建vue项⽬环境1、cnpm 全局安装vue-cli，输⼊命令：cnpm install--globalvue-cli 安装vue-cli； 　 验证是否安装成功：vue，出来vue的信息，及说明安装成功；　　2、开始建⼀个新项⽬：不想敲cmd路径的，进⼊你创建的项⽬⽬录，按Shift+右键，创建⼀个基于 webpack 模板的新项⽬，输⼊命令: vue init webpack my_vue ，my_vue是⽂件夹的名字。Projectnamevue-demo// 你的项⽬名称 Project descriptionA project// 你的项⽬描述AuthorSamiu// 作者的名称Vue build standalone// 打包⽅式，默认，直接回车 Install vue-router?Yes// 是否安装 vue-router，路由，选(Y) Use ESLint tolint your code?No// 是否安装 eslint管理代码，不推荐，不然你还会想办法关掉它，选(N)SetupunittestswithKarma + Mocha?No　　// 是否安装Karma+ Mocha 单元测试⼯具，选（N）Setup e2e testswithNightwatch?No// 是否安装e2e端到端测试⼯具，选（N）项⽬⽬录下输⼊命令：npm i// 安装项⽬依赖npm run dev// 开始！8080是默认的端⼝，要访问的话，直接在浏览器输⼊localhost:8080就可以打开默认的模板了；三、vue项⽬⽬录讲解　　1、build：构建脚本⽬录　　1） ==> ⽣产环境构建脚本；　　　　2） ==> 检查npm，版本；　　　　3） ==> 构建相关⼯具⽅法；　　　　4） ==> 配置了css加载器以及编译css之后⾃动添加前缀；　　　　5） ==> webpack基本配置；　　　　6） ==> webpack开发环境配置；　　　　7） ==> webpack⽣产环境配置；　　2、config：项⽬配置　　　　1） ==> 开发环境变量；　　　　2） ==> 项⽬配置⽂件；　　　　3） ==> ⽣产环境变量；　　3、node_modules：npm 加载的项⽬依赖模块（依赖包都在这⾥）　　4、src：这⾥是我们要开发的⽬录，基本上要做的事情都在这个⽬录⾥。⾥⾯包含了⼏个⽬录及⽂件：　　　　1）assets：资源⽬录，放置⼀些图⽚或者公共js、公共css。这⾥的资源会被webpack构建；　　　　2）components：组件⽬录，我们写的组件就放在这个⽬录⾥⾯；　　　　3）router：前端路由，我们需要配置的路由路径写在⾥⾯；　　　　4）：根组件；　　　　5）：⼊⼝js⽂件；　　5、static：静态资源⽬录，如图⽚、字体等。不会被webpack构建　　6、：⾸页⼊⼝⽂件，可以添加⼀些 meta 信息等7、：npm包配置⽂件，定义了项⽬的npm脚本，依赖包等信息　　8、：项⽬的说明⽂档，markdown 格式　　9、.xxxx⽂件：这些是⼀些配置⽂件，包括语法配置，git配置等四、基本配置说明vue⾃动打开浏览器默认为false与端⼝号修改。　　解决：　　　　1）打开config ==> 　　　　2）s配置中找到autoOpenBrowser，改为true，执⾏ npm run dev 就会⾃动打开浏览器。　　　　3）s 配置中找到 port: 8080，可修改端⼝。

2023年6月21日发(作者：)

从零0开始完整搭建⼀个VUE项⽬⼀、安装node环境2、检查是否安装成功：node -v 如果输出版本号，说明我们安装node环境成功。npm包管理器是集成在中了，所以在安装的时候就已经⾃带了npm。输⼊npm -v可得到npm的版本。 检查是否安装成功：cnpm -v ⼆、搭建vue项⽬环境1、cnpm 全局安装vue-cli，输⼊命令：cnpm install--globalvue-cli 安装vue-cli； 　 验证是否安装成功：vue，出来vue的信息，及说明安装成功；　　2、开始建⼀个新项⽬：不想敲cmd路径的，进⼊你创建的项⽬⽬录，按Shift+右键，创建⼀个基于 webpack 模板的新项⽬，输⼊命令: vue init webpack my_vue ，my_vue是⽂件夹的名字。Projectnamevue-demo// 你的项⽬名称 Project descriptionA project// 你的项⽬描述AuthorSamiu// 作者的名称Vue build standalone// 打包⽅式，默认，直接回车 Install vue-router?Yes// 是否安装 vue-router，路由，选(Y) Use ESLint tolint your code?No// 是否安装 eslint管理代码，不推荐，不然你还会想办法关掉它，选(N)SetupunittestswithKarma + Mocha?No　　// 是否安装Karma+ Mocha 单元测试⼯具，选（N）Setup e2e testswithNightwatch?No// 是否安装e2e端到端测试⼯具，选（N）项⽬⽬录下输⼊命令：npm i// 安装项⽬依赖npm run dev// 开始！8080是默认的端⼝，要访问的话，直接在浏览器输⼊localhost:8080就可以打开默认的模板了；三、vue项⽬⽬录讲解　　1、build：构建脚本⽬录　　1） ==> ⽣产环境构建脚本；　　　　2） ==> 检查npm，版本；　　　　3） ==> 构建相关⼯具⽅法；　　　　4） ==> 配置了css加载器以及编译css之后⾃动添加前缀；　　　　5） ==> webpack基本配置；　　　　6） ==> webpack开发环境配置；　　　　7） ==> webpack⽣产环境配置；　　2、config：项⽬配置　　　　1） ==> 开发环境变量；　　　　2） ==> 项⽬配置⽂件；　　　　3） ==> ⽣产环境变量；　　3、node_modules：npm 加载的项⽬依赖模块（依赖包都在这⾥）　　4、src：这⾥是我们要开发的⽬录，基本上要做的事情都在这个⽬录⾥。⾥⾯包含了⼏个⽬录及⽂件：　　　　1）assets：资源⽬录，放置⼀些图⽚或者公共js、公共css。这⾥的资源会被webpack构建；　　　　2）components：组件⽬录，我们写的组件就放在这个⽬录⾥⾯；　　　　3）router：前端路由，我们需要配置的路由路径写在⾥⾯；　　　　4）：根组件；　　　　5）：⼊⼝js⽂件；　　5、static：静态资源⽬录，如图⽚、字体等。不会被webpack构建　　6、：⾸页⼊⼝⽂件，可以添加⼀些 meta 信息等7、：npm包配置⽂件，定义了项⽬的npm脚本，依赖包等信息　　8、：项⽬的说明⽂档，markdown 格式　　9、.xxxx⽂件：这些是⼀些配置⽂件，包括语法配置，git配置等四、基本配置说明vue⾃动打开浏览器默认为false与端⼝号修改。　　解决：　　　　1）打开config ==> 　　　　2）s配置中找到autoOpenBrowser，改为true，执⾏ npm run dev 就会⾃动打开浏览器。　　　　3）s 配置中找到 port: 8080，可修改端⼝。