文章目录1、安装nodejs2、查看版本号2.1配置npm在安装全局模块时的路径和缓存cache的路径可选操作2.2、npm常用命令2.2.1、安装2.2.2、npm更新、卸载2.2.3、npm查看命令2.2.3、其他3、安装vue/cli遇到的问题3.1 使用vue ui来创建项目3.2初始界面3.3创建新的项目3.4 手动选着需要那些插件支持3.4.1 各个插件的功能3.4.2 界面3.5 配置3.5.1 创建项目3.5.24、新项目窗口4.1 项目各文件介绍4.2 各个修改添加文件详细4.3、运行项目5、路由5.1 动态路由5.2 嵌套路由5.3 命名路由参考网址1、安装nodejs2、查看版本号进入cmd命令行执行 node -v 和 npm -v 分别查看node和npm的版本号node -v npm -v2.1配置npm在安装全局模块时的路径和缓存cache的路径可选操作//D:\nodejs为nodejs安装目录 npm config set prefix D:\Program Files\nodejs\node_global npm config set cache D:\Program Files\nodejs\node_cache //修改完成后输入npm config ls查看修改信息2.2、npm常用命令2.2.1、安装# 全局安装 npm install 模块名 -g # 本地安装 npm install 模块名 # 一次性安装多个 npm install 模块名 模块名 # 安装开发时依赖包 npm install 模块名 --save-dev # 安装运行时依赖包 npm install 模块名 --save2.2.2、npm更新、卸载- 查看帮助命令 npm help - 检查包是否已经过时 npm outdated - 更新node模块 npm update 模块名 npm update 模块名 版本号 更新到指定版本 npm update 模块名 latest - 卸载node模块 npm uninstall 模块名2.2.3、npm查看命令- 清除缓存 npm cache clean --force //清除缓存 - 查看某个包对于各种包的依赖关系 npm view 模块名 dependencies - 查看包的源文件地址 npm view 模块名 repository.url - 查看当前模块依赖的node最低版本号 npm view 模块名 engines - 查看模块的当前版本号 npm view 模块名 version - 查看模块的历史版本和当前版本 npm view 模块名 versions - 查看一个模块的所有信息 npm view 模块名 - 查看当前已经安装的模块 npm list npm list --depth0 //限制输入的模块层级 npm list 模块名 - 查看全局的包的安装路径 npm root -g2.2.3、其他- 更改包内容后进行重建 npm rebuild 模块名 - 访问package.json的字段文档 npm help json - 查看某个模块的bugs列表界面 npm bugs 模块名 - 打开某个模块的仓库界面 npm repo 模块名 - 打开某个模块的文档 npm docs 模块名 - 打开某个模块的主页 npm home 模块名 - 清除未被使用到的模块 npm prune3、安装vue/cli关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 vue/cli。 如果你已经全局 安装了旧版本的 vue-cli (1.x 或 2.x)你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。npm install-gvue/cli # OR yarn global addvue/cli//前提安装了yarn遇到的问题在使用命令npm install -g vue/cli安装vue-cli时一直报错运行以下命令以后再运行安装命令问题解决。npm config set registry http://registry.npm.taobao.org/你还可以用这个命令来检查其版本是否正确 (3.x)vue --version3.1 使用vue ui来创建项目PS C:\WINDOWS\system32 vue ui ? Starting GUI... ? Ready on http://localhost:80003.2初始界面3.3创建新的项目3.4 手动选着需要那些插件支持3.4.1 各个插件的功能babel:会将es6789的es代码转换成es3、5等低一级的浏览器能够支持的形式---需要 pwa渐进式移动应用---不需要 router路由---需要 vuex官方的状态管理工具---需要 css pre-processorscss预处理器如果习惯使用css预处理器则勾选---需要 linter/formatter 会在编译器为我们做一些代码的检测如编写风格和一些低级的错误---需要 unit testing单元测试---不需要 use config files 使用配置文件---需要3.4.2 界面3.5 配置选择要用的css预处理器---LESS 选择eslint风格---eslintstandard config 保存检测代码---需要 提交检测代码---不需要3.5.1 创建项目3.5.2PS C:\WINDOWS\system32 vue --version 3.11.0 PS C:\WINDOWS\system32 vue ui ? Starting GUI... ? Ready on http://localhost:8000 ✨ Creating project in d:\intellij_IDEA\vue-cource. ? Initializing git repository... ⚓ Running completion hooks... ? Generating README.md...4、新项目窗口1、插件栏 2、配置栏 3、项目任务 1server开发运行的环境 2build打包编译项目 3lint检查并修复文件 4inspect用于检查webpack配置4.1 项目各文件介绍vue.config.js:lintOnSave:取消每次保存时的检测package.json:定义了项目的一些描述如项目的版本(version)、名称(name)、项目运行的一些脚本(scripts)、项目中的一些依赖打包阶段需要的依赖(dependencies)、开发阶段需要用到的依赖(devDependencies)babel.config:babel的配置文件.postcssrc:css自动补充一些兼容性代码的配置文件.gitignore:git提交的忽略文件.eslintrc.js:用来配置eslint规则的配置文件、在rules中去修改添加public:里面放的是公共文件 index.html:里面是模板文件、webpack在运行打包我们的项目时会使用这个个文件作为模板去生成项目 最后的index.html。 favicon.ico:在标签栏中看见的小图标 src:项目的主文件:assets:用来放置静态资源、如图片、图标、字体文件 components:组建文件夹、从代码中抽离出一些可以复用的逻辑、便于复用 views:页面所在 App.vue:基础组件 main.js:项目入口文件、项目在开发、编译、运行时都会以这个目录作为起始点进入在里面引入以及编译 router.js:路由文件 store.js:状态管理文件 补充的文件:.editconfig:配置一些编写的使用习惯 roottrue// 首先让它生效[*]// 对所有文件都有效charsetutf-8// 编码设置为utf-8indent_styletabs// 使用tabs缩进indent_size2// 缩进的尺寸src:api:assets:img:font:config:index.js:在其他处引用方法(书写./config会自动去找其中的index.js)importconfigfrom./configexportdefault{}directive:index.js:用来存放vue自定义指令 lib:util.js:与业务结合的工具方法放在此处 tool.js:与业务无关的工具方法 router:只有一个router.js、在编写路由拦截等其他路由设置时会很复杂需要一个文件夹将其分开编写 router.js:将其挪入路由文件夹中 index.js:路由列表的索引文件使用es6的模块化系统将其他路由模块化导入该文件 store:index.js:将store.js更名为index.js。将其他js引入该文件 state.js:mutations.js:action.js:module:里面放板块 user.js:与用户相关的用户名、用户信息 main.js:对main.js进行修改修改router和store的起始文件为index.js mock:请求模拟返回一些模拟数据 index.js:使用npm install mockjs-D安装mockjs会在package.json里面devDependencies 中增加一行mockjs:^1.0.1-beta3views:argu.vue:文件目录此为截至到5.3的路由4.2 各个修改添加文件详细index.jsimportVuefromvueimportVuexfromvueximportstatefrom./stateimportmutationsfrom./mutationsimportactionsfrom./actionsimportuserfrom./modele/userVue.use(Vuex)exportdefaultnewVuex.Store({state:state,mutations:mutations,actions:actions,modules:{user}})user.jsconststate{//}constmutations{//}constactions{//}exportdefault{state,mutations,actions}mock.index.jsimportMockfrommockjs//exportdefaultMockvue.config.js// 先引入path的node模块constpathrequire(path)constresolvedir{returnpath.join(__dirname,dir)}// 如果当前是要打包编译了还是只是开发环境。/代表指定到根目录下。constBASE_URLprocess.env.NODE_ENVprocution?/iview-admin/:/module.exports{lintOnSave:false,baseUrl:BASE_URL,// 颗粒化去配置webpackchainWebpack:config{// 链式调用config.resolve.alias.set(,resolve(src))// 设置简写用代替src的过程如引入api直接写api.set(_c,resolve(src/components))},// 在打包时不生成.map文件productionSourceMap:false,// 会告诉开发服务器将所有没有匹配到静态文件的请求都代理到以下urldevServer:{proxy:http://localhost:4000}}4.3、运行项目npm run serve run npm run build // To create a production build5、路由router/router.js :importHomefrom/views/Homeexportdefault[{path:/,// 定义别名alias:/home_page,name:home,component:Home},{path:/about,name:about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.// 懒加载component:()import(/* webpackChunkName: about *//views/About.vue)},{// 动态路由参数不管参数是什么匹配到的都是这个路由对象path:/argu/:name,name:argu,// 参数params:{name:lison},component:()import(/views/argu.vue),// true表示里面的参数它会使用router的params作为组建的属性此时params中// 有一个name(/argu/:name),它就会把name传入argu的属性里props:true},// 嵌套路由{path:/parent,name:parent,component:()import(/views/parent.vue),// children代表着嵌套在parent里面的子集页面路径不用写斜线作为子集会自动补全children:[{path:child,component:()import(/views/child.vue)}]},{path:/named_view,// 注意有个scomponents:{// 没有命名则加载defaultdefault:()import(/views/child.vue),email:()import(/views/email.vue),tel:()import(/views/tel.vue)}},// 重定向路由{path:/main,// redirect: /// redirect: to {// console.log(to)// }// redirect: home// redirect: to {// return {// name: home// }// }redirect:to{return/}}]App.vue!--一个示例即运行vue时的页面--templatediv idappdiv idnav!--封装了一个a标签里面有一个重要属性to它指定的值是一个路径--router-link v-bind:to{name: home}Home/router-link|!--命名路由可以通过指定name来跳转到相应界面--router-link v-bind:to{name: about}About/router-link/div!--是一个视图渲染组件--router-view/!--命名视图--router-view nameemail/router-view nametel//div/templatestyle langless#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;}#nav{padding:30px;a{font-weight:bold;color:#2c3e50;.router-link-exact-active{color:#42b983;}}}/style5.1 动态路由views/argu.vue :templatediv!--$route代表当前加载的路由对象包含params参数它是一个对象里面包含一个叫做name的值--{{$route.params.name}}/div/templatescriptexportdefault{//}/script访问页面 http://localhost:8080/#/argu/sun5.2 嵌套路由views/child.vue :templatedivi am child/div/templatescript/scriptstyle scoped/styleviews/parent.vue :template div i am parent router-view/ /div /template script export default { // } /script访问页面 http://localhost:8080/#/parent/child5.3 命名路由将home和about通过命名路由来指定跳转App.vue :!--一个示例即运行vue时的页面--templatediv idappdiv idnav!--封装了一个a标签里面有一个重要属性to它指定的值是一个路径--router-link v-bind:to{name: home}Home/router-link|!--命名路由可以通过指定name来跳转到相应界面--router-link v-bind:to{name: about}About/router-link/div!--是一个视图渲染组件--router-view//div/template访问网页 : http://localhost:8080/#/不想记了效率太低爱咋咋地把参考网址https://www.jianshu.com/p/d6de1662a2c2