新版vue脚手架vue-cli的安装

1.脚手架的安装

win 10+系统 左下角的任务栏搜索 powersell  右键已管理员身份打开;
或者是win+r 运行cmd

1.安装脚手架:
全局安装cli脚手架:
    检查 node版本  node -v
    检查 npm 版本  npm -v
不会出现node 或者npm 不是内部或外部命令 证明环境是可以的;

    npm install -g @vue/cli (推荐)或者 npm install -g @vue-cli 或者 npm install -g @vue/cli-init
中间加-g的原因 意为全局安装;
    
判断是否安装成功:
    vue --version

2.初始化vue-cli项目:
    vue create 文件名(推荐)  或者  vue init webpack 文件名

     Please pick a preset: (Use arrow keys)   选择要创建的配置项目   选择第三个
    Check the features needed for your project: (Press to select, to toggle all, to invert selection, and
to proceed)     选择项目所需要的配置     选择 babel  Progressive Web App (PWA) Support  Router  Vuex  CSS Pre-processors Linter / Formatter   按数字键选择或者取消选择
     Choose a version of Vue.js that you want to start the project with (Use arrow keys)  选择Vue版本  2.x
    Use history mode for router    使用history 模式 的router   输入Y
     Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)  选择css预编译的语法  选sass/scss
     Pick a linter / formatter config: (Use arrow keys)  选择第一个
    Where do you prefer placing config for Babel, ESLint, etc.?    In package.json
    Save this as a preset for future projects   N


安装国内镜像:
    1.npm config set registry https://registry.npm.taobao.org
    2.npm config get registry
    3. npm install -g cnpm --registry=https://registry.npm.taobao.org
    解决安装卡顿或无法安装:
         # 注册模块镜像
         npm set registry https://registry.npm.taobao.org  
          // node-gyp 编译依赖的 node 源码镜像  
         npm set disturl https://npm.taobao.org/dist
         // 清空缓存  
         npm cache clean --force  
         // 安装cnpm  
         npm install -g cnpm --registry=https://registry.npm.taobao.org
    4.cnpm install -g @vue/cli

2.脚手架项目文件的解释

build    打包vue项目的配置

config    项目的配置文件
    dev.env.js        开发环境下的的配置文件
    index.js        项目在开发环境下的配置文件
    prod.env.js    生产环境下的配置文件
node _modules    项目运行所需要的依赖包

src    项目的核心文件
    assets        项目默认的静态资源文件夹,一般来说所有的图片都放在这个文件夹下,当然不放也无所谓
    components    常用组件的放置目录,不用这个文件夹也无所谓
    router        vue路由的配置文件
    APP.vue        启动Vue项目的根组件
    main.js        当前项目的核心配置文件,不要随意更改名字,当前项目所用到的全局的UI库,插件,JS等文件都可以在这里配置
static    项目的静态资源

index.html     启动Vue项目的唯一的html文件(不要改)

package-lock.json    依赖包的配置文件
package.json    项目的配置文件,一般项目中所需要的依赖包,都会配置在这个文件下,

你可能感兴趣的:(vue.js,前端,npm)