安装Vue脚手架保姆教程

npm 是node.js管理工具 前端主流技术 都可以npm管理 就类似后端的maven项目中的pro.xml

npm配置淘宝镜像、npm本地下载位置配置、npm全局缓存 。在我上一个帖子中有讲[]

npm config set registry registry.npm.taobao.org

npm本地下载位置配置： npm config set prefix "路径"

   npm本地缓存位置：
nmp config set cache "路经"

   查看npm配置路径

npm config ls

   安装Vue脚手架
   npm install -g vue-cli   //2.x版本安装
   npm install -g @vue/cli   //3.x版本安装
   卸载Vue脚手架
   npm uninstall -g @vue/cli  //这是3.x版本卸载
   npm uninstall -g vue-cli  //这是2.x版本卸载

   初始化 vue脚手架
  vue init webpack 项目名
  
  
   
   需要进入当前项目文件夹中运行
   npm start 运行前端系统
   
   
   项目结构：
      StockAndSale    项目名
      
         build --------用来使用webpack打包使用build依赖
         config -------用来做整个项目配置目录
         node_modules --------用来管理项目中使用依赖
         src(重点关注)---------用来书写Vue组件【重点】
             assets---------- 用来存放静态资源【重点】
             components --------用来书写VUE组件【重点】
             router --------用来配置项目中路由【重点】
             App.vue---------项目中根组件【重点】
             main.js --------项目中主入口【重点】
        static---------其他静态
        babelrc------将es6 语法转为es5运行
        editorconfig---- 项目编辑配置
        gitignore-------git版本控制忽略文件
            postcssrc.js -------源码相关js
        index.html-----项目主页
        package.json --------类似与pom.xml 依赖管理   jquery不建议手动修改
        package-lock.json --------对package.json加锁
        README.MD------- 项目说明文件
        
        
       
       Vue Cli中项目开发方式
           注意：一切皆组件      一个组件中   js代码   html代码，  css样式
   
       1.VueCli开发方式是项目中开发一个一个组件对应业务功能模块，日后可以将多个组件组合形成一个前端系统
       2.日后 在使用Vue Cli 进行开发时不再书写html，编写的是一个一个的组件（组件后缀.vue结尾的文件），日后打包时Vue Cli 会将组件编译成运行的html文件。
       
   
   如何开发Vue 脚手架
   注意：一切皆组件
   
   
 
 
 
 构建
 ：vue init webpack 项目名
 
 run serve启动 vue 
 
npm run serve